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□ EH 


Bootstrap e um poderoso framework front-end voltado para o desenvolvimento 
rapido e facil de sites e aplicaq:6es web responsivos e alinhados com a filosofia 
mobile-first. E indicado para dispositivos e projetos de todos os tamanhos e desti- 
nado a desenvolvedores com qualquer nfvel de conhecimento, 

Assuntos tratados no livro: 

■ Sistema de grid e sua aplicagao na construgao de layouts dos mais simples 
aos mais complexos. 

■ Estilizagao-padrao para elementos HTML tipograficos de marcagao de 
codigos, tabelas, formularios, botoes, imagens e (cones. 

■ Criagao e estilizagao de elementos de interface grafica, como barras de 
navegagao, janelas modais, navegagao em abas, menus dropdown, pagi- 
nagao, barras de progresso, paineis, agrupamento e listas. 

■ Integragao das funcionalidades do framework com a biblioteca jQuery 
para obtengao de tooltip, scrollspy, popover, alertas, efeito carrossel, affix 
e colapse. 

0 ultimo capftulo do livro mostra como criar, passo a passo, a marcagao da home- 
page de um site a partir da imagem da pagina usando o grid e as funcionalidades 
do Bootstrap. 

Os assuntos e as funcionalidades mostrados no livro, quando julgado conveniente, 
sao ilustrados com um exemplo pratico que se encontra dispomvel para consulta 
online em http://livrosdomaujor.com.br/bootstrap3/codigos.html. 

Neste livro voce aprendera o essencial para obter o maximo proveito dos recur- 
sos deste incrfvel framework e sera capaz de criar aplicagoes web com qualidade 
profissional. 
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Introdugao 


Este livro tem por objetivo fornecer aos profissionais envolvidos com o desen- 
volvimento para a web os conceitos fundamentais e as tecnicas de programagao 
necessarias ao desenvolvimento de interfaces responsivas com uso do framework 
Bootstrap. 


Para quern foi escrito este livro 

Este livro foi escrito para aquelas pessoas envolvidas na criagao de sites tanto na 
area de design quanto na de desenvolvimento e programagao, que desejam usar 
um framework mundialmente consagrado para criar interfaces usaveis e acessiveis 
em qualquer dispositivo, independentemente de suas caracteristicas, isto e, que 
se adaptem as mais variadas resolugoes de tela. 

O objetivo do livro e fornecer informagoes detalhadas dos componentes do fra¬ 
mework Bootstrap, estudando seus principios e detalhando as funcionalidades 
previstas nao somente pelo core (coragao) do framework como tambem por cada 
um dos seus componentes. Explicagoes teoricas em linguagem corrente e clara, 
dispensando, sempre que possivel, o jargao tecnico avangado sao acompanhadas 
de exemplos praticos explicados passo a passo e complementados por arquivo 
HTML para consulta. 

Para tirar o maximo proveito dos ensinamentos contidos em cada capitulo e pre- 
-requisito um razoavel conhecimento de marcagao HTML e das CSS e da criagao 
de folhas de estilo. E desejavel que o leitor tenha conhecimentos necessarios para 
criar, com uso daquelas duas tecnologias, um layout simples de duas colunas. 

Os conceitos e o entendimento das tecnicas de desenvolvimento de interfaces 
responsivas sao poderosas ferramentas de apoio na criagao de sites mais aces¬ 
siveis, enriquecendo a experiencia do usuario. Profissionais da area de design, 
familiarizados com as tecnicas aqui descritas, contarao com uma valiosa fonte 
de conhecimento e conceitos a empregar no planejamento das funcionalidades 
para incrementar suas criagoes, tornando-as universais. 
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Os iniciantes irao se beneficiar deste livro por comegar seus estudos em uma 
fonte que aborda os principios basicos de uso de frameworks CSS e das mais 
modernas tecnicas de escrita do codigo, ensejando uma mudanga no rumo de 
seu estudo que ira reduzir a curva de aprendizado e acelerar tal processo. Nao 
se intimidem com conceitos ou terminologias que lhes sejam completamente 
desconhecidos nos primeiros capitulos. Com a sequencia da leitura, as duvidas 
tenderao a desaparecer naturalmente. 


Converges tipograficas 

Com a finalidade de destacar diferentes tipos de informagao neste livro, adotaram- 
-se algumas convengoes tipograficas mostradas a seguir. 

Dica 

Texto contendo uma dica sobre o assunto tratado: 


Dica: Para suporte nativo das funcionalidades mostradas neste capitulo, consulte 
o site http://caniuse.com. 


Alerta 

Texto contendo um lembrete sobre procedimento extra com relagao ao assunto 
tratado: 


Alerta: Convem ressaltar que o grid do Bootstrap foi criado segundo os principios 
da filosofia mobile first e, logicamente, e responsivo. 


Terminologia 

Texto estabelecendo a adogao de grafia-padrao em todo o livro para termos ou 
frases com mais de uma terminologia, uma tradugao ou um significado: 


Terminologia: Nos codigos desenvolvidos neste livro, adotou-se a sintaxe-padrao. 
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Boostrap 3.3.5 


Chamada 

Uma chamada para uma segao anterior na qual o assunto em questao foi expli- 
cado com detalhes. 

Por exemplo: 

Conforme estudamos no item [3.5.1.2], por padrao, os botoes sao estilizados com 
um padding que determina suas dimensoes. 

Neste exemplo, a chamada e para a segao 3.5.1.2, ou seja, capitulo 3 (o primeiro 
numero indica o capitulo), item 5, subitem 1 subitem 2. 

Marcagao e scripts 

Nas marcagoes e nos scripts que exemplifrcam a teoria, transcreveram-se somente 
os trechos que interessam ao assunto tratado. Omitiram-se os trechos que nao 
dizem respeito ou nao sao relevantes para o entendimento do assunto, para nao 
ocupar espago desnecessario no livro. 

Blocos de marcagao sao marcados com fonte monoespagada: 

<ul> 

<li><a href="#">Honie</a></li> 

<H><a href="#">Portf6lio</a></li> 

<U><a href="#">Loja</ax/li> 

<U><a href="#">Contato</ax/li> 

</ul> 

Trechos de marcagao que merecem destaque sao marcados em negrito: 

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”x/script> 
<script>window.jQuery || document.write('<script src="../bootstrap/js/jquery.min.js"> 
<\/script>')</script> 

<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"x/script> 

<scri.pt type="text/javascript"> 

$('.dropdown-toggle').dropdown(); 

</script> 

<body> 

<htnl> 

Para explicar passo a passo, quando julgado conveniente, cada linha do script 
foi apresentada com suas linhas numeradas e, a seguir, os comentarios foram 
referenciados ao numero da linha comentada: 
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1. <button type="button" class="btn btn-primary btn-lg" data-toggle="nodal" data- 
target="#nodalLogin"> 

2. Abrir janela nodal 

3. </button 

4. <div class="nodal fade” ld="nodalLogin" tabindex="-l" role="dialog" aria- 
labelledby="nodalLoglnLabel"> 

5. <div class="nodal-dialog" role="docunent"> 

6. <div class="nodal-content"> 

7. <div class=''nodal-header"» 

8. <button type="button" class="close" data-disniss="nodal" 

aria-label="Close"> <span aria-hidden="true">&times;</span></button> 

9. <h4 class="nodal-title">Area adninistrativa</h4> 

10. </div> 

11. <div class="nodal-body"> 

12 <!-- conteudo da janela nodal --> 

13. </div> 

14. <div class="nodal-footer"> 

15. <button type="button" class="btn btn-default" data-dismiss="modal"> 

Fechar</button> 

16. </div> 

17. </dlv> <!-- /.nodal-content --> 

18. </div> <!-- /.nodal-dilog --> 

19. </div> <!-- /.nodal --> 

[.../c5/modal-data-toggle.html] 

Codigo comentado: 

Linha(s) Descri^ao 

Linhas 1 a 3 Botao para abertura da janela modal. O atributo data-targetdeveapon- 

tar para o valor do atributo id do container geral da janela; em nosso 
caso, o div#nodalLogin na linha 4. Opcionalmente, em lugar de um botao 
para abrir a janela, poderlamos usar um link, e neste caso o atributo 
href do link apontaria para o id do container geral da janela; em nosso 
caso, href="#nodalLogin". Aclasse btn definida para o link de abertura da 
janela faz com que os mecanismos internos do Bootstrap transformem 
o link em um botao. Esse botao pode ser estilizado com uso de classes 
adicionais,tal como btn-prinarye btn-lg. Aclasse data -toggle, definida para 
aquele link, informa ao Bootstrap que a janela modal tera seu script 
de abertura e fechamento inserido automaticamente sem necessidade 
de codificagao JavaScript pelo autor. 
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Linha(s) 

Linha 4 a 19 


Boostrap 3.3.5 


Linhas 5 e 6 


Descriqio (cont.) 

Marcagao do div container da janela modal. A classe modal e de uso 
obrigatorio e informa ao Bootstrap que trata-se do container de uma 
janela modal. A classe fade faz com que o efeito de abertura seja por 
deslizamento da janela no sentido vertical, na diregao de cima para 
baixo e com efeito de esmaecimento. Opcionalmente, podemos omitir 
o valor fade que produz o efeito de mostrar e esconder a janela sem 
deslizamento e esmaecimento, ou seja, abertura e fechamento fixa na 
sua posigao. Sugiro fazer uma copia do exemplo e retirar a classe fade 
verificando na pratica os dois efeitos de abertura/fechamento. O atributo 
id e de livre escolha do autor. 

Containers auxiliares para estilizagao e scripts. 


Arquivos para download 

Os scripts mostrados no livro estao disponlveis para consulta online em 
http://livrosdomaujor.com.br/bootstrap3/codigos.html. Os arquivos foram nomeados 
com sintaxe propria, conforme o exemplo a seguir: 

http://livmsdomaujor.com.br/bootstrap3/Lodigos/c4/botoes-dropdown.html 

Este e o URL (enderego na web) do arquivo que mostra um exemplo contido no 
capltulo 4 do livro e referente a funcionalidade dropdown para botoes. 

Adicionalmente, ao final da marcagao, ha uma indicagao do enderego para o 
arquivo conforme convengao mostrada no exemplo a seguir: 

• HTML 

<div class=”btn-group”> 

<button type="button" class="btn btn-default>EDITAR</button> 

<button type="button" class="btn btn-default dropdown-toggle' 1 
data-toggle="dropdown" aria-expanded="false"> 

EDITAR <span class="caret"x/span> 

</button> 

<ul class="dropdown-menu" role="menu"> 

<li><a href="#">novo</a></li> 

<Uxa href="#">abrir</a></li> 

<Uxa href="#">fechar</a></li> 

<11 class="divider"></li> 

<li><a href="#">salvar</a></li> 

</ul> 

</div> 

[.../c4/botoes-dropdown.html] 
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Destaques em geral 

Palavras ou termos cujo significado deva ser destacado sao grafados em italico. 
Por exemplo: 

O Bootstrap oferece ainda alguns grupos de classes para estilizagao avangada de 
tooltip em forma diversa daquela do tooltip basico. 

Mariams 

Valores variaveis em codigos sao grafados em italico. 


Arquivos dos exemplos do livro 

Os links para os arquivos dos exemplos deste livro constam de uma pagina web 
localizada em http://www.livrosdomaujor.com.br/bootstrap3/codigos.html. 

Por tratar-se de um livro oferecido gratuitamente, tanto o autor como a editora se 
desobrigam de prestagao de qualquer tipo de suporte tecnico aos leitores. 
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CAPITULO 1 

Apresenta^ao do Bootstrap 


Neste capitulo, faremos a apresentagao do framework Bootstrap. Veremos a de- 
finigao, o historico e as razoes para o uso do Bootstrap. Listaremos as segoes e 
seus conteudos onde constam os assuntos a serem tratados no livro. Mostraremos 
como criar o template minirno para desenvolver uma aplicagao, apresentaremos 
o Bootlint e abordaremos o suporte e a acessibilidade do framework. 

Ao longo dos textos e das explicagoes contidas no livro, para nao repetir exaus- 
tivamente o termo “framework Bootstrap”, o abreviaremos para simplesmente 
Bootstrap. Assim, neste livro, salvo indicagao contraria, Bootstrap e o mesmo que 
framework Bootstrap. 


1.1 Introdu^ao 

Bootstrap e o mais popular framework JavaScript, HTML e CSS para desenvol- 
vimento de sites e aplicagoes web responsivas e alinhadas com a filosofia mobile 
first. Torna o desenvolvimento front-end muito mais rapido e facil. Indicado para 
desenvolvedores de todos os niveis de conhecimento, dispositivos de todos os 
tipos e projetos de todos os tamanhos. 


1.1.1 Definigao 

O site do Bootstrap o define como um poderoso, elegante e intuitivo framework 
front-end que possibilita um desenvolvimento web de modo agil e facil. 
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Capi'tulo 1 ■ Apresentacao do Bootstrap 

1.1.2 Historico 


21 


No dia 19 de agosto de 2011, Mark Otto ( @mdo ), um desenvolvedor trabalhando 
no Twitter, criador do Bootstrap juntamente com Jacob Thornton ( @fat ), anunciou 
ao mundo o langamento do Bootstrap em um artigo publicado no blog do Twitter. 

Iniciou o artigo dizendo estar feliz com o langamento de um kit de ferramentas 
front-end destinado a agilizar o desenvolvimento de aplicagoes web. 

Naquele artigo, relatou que no initio do Twitter cada desenvolvedor usava a 
biblioteca que lhe era familiar para solucionar os problemas de front-end. Esse 
procedimento criou inconsistencias, dificultando a integragao, a escalabilidade e 
a manutengao das aplicagoes criadas por diferentes desenvolvedores da equipe. 

Bootstrap foi a proposta de solugao para aquelas inconsistencias. Apresentada na 
primeira Twitter Hackweek realizada na semana de 22 a 29 de outubro de 2011, 
de la saiu com sua primeira versao estavel e pronta para uso. 


1.1.3 Por que usar Bootstrap 

No artigo de langamento do Bootstrap, Mark Otto, ao explicar as razoes para 
usar Bootstrap, comega afirmando que o coragao do Bootstrap nada mais e do 
que CSS criado com LESS, um pre-processador destinado a gerar folhas de estilos 
CSS capaz de oferecer muito mais flexibilidade e poder do que as folhas de estilos 
convencionais, ou nao processadas. Posteriormente foram criadas funcionalidades 
que permitem usar nao somente LESS, mas tambem SASS como pre-processador 
CSS para o Bootstrap. 

LESS e SASS sao capazes de oferecer uma vasta gama de funcionalidades, tais 
como declaragoes CSS aninhadas, variaveis para valores de propriedades CSS, 
mixins (especie de classe capaz de ser reusada), operadores e fungoes para de- 
claragao de cores. 

Uma vez compilado via LESS ou SASS, o resultado e uma folha de estilos pura, 
cuja implementagao na aplicagao e muito simples; basta linear o arquivo CSS ao 
documento. Outro beneficio e que nao ha imagens, Flash ou JavaScript adicionais, 
somente folha de estilos. 

Nao e do escopo deste livro detalhar o uso dos pre-processadores LESS e SASS 
para criar folhas de estilos para o Bootstrap. 
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1.1.4 Segoes da documentagao do Bootstrap 

Para fins de estudo, adotaremos neste livro as mesmas cinco segoes constantes do 
site do Bootstrap, conforme listadas a seguir. 

• Introdu^ao - Segao de apresentagao dos fundamentos ou da fundagao inicial 
para a criagao com uso do Bootstrap. Nessa segao sao listadas as ferramentas 
de desenvolvimento, os arquivos do download do Bootstrap e a criagao do 
ambiente de desenvolvimento. Sao mostrados os templates HTML5 para 
criagao de aplicagoes em layouts fixos, fluidos e responsivos. 

• CSS - Nessa segao sao mostradas as regras CSS comuns, tais como defmigoes 
de valores CSS para tipografia em geral, CSS reset etc. Sao ainda detalhadas 
as declaragoes CSS para varios elementos da marcagao HTML, tais como 
tabelas, formularios, botoes, imagens, uso de icones e muito mais. 

• Componentes - Nessa segao se estuda a criagao de componentes de interface. 
Os componentes de interface previstos no Bootstrap sao listados a seguir. 

• Glifos 

• Dropdown 

• Agrupamento de botoes 

• Dropdown com botoes 

• Grupamento de inputs 

• Navegagao 

• Barra de navegagao 

• Breadcrumbs (caminho da navegagao) 

• Paginagao 

• Rotulos e marcadores 

• Badges (marca de destaque) 

• Jumbotron (tela de destaque) 

• Page header (elemento hi) 

• Thumbnails 

• Alertas 

• Barra de progresso 
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• Objetos de midia 

• Grupamento de listas 

• Paineis 

• Embed responsivo 

• Wells (container estilizado com bordas arredondadas, cor de fundo e 
efeito inset) 

• Plugins - Nessa segao se estuda a integragao dos plugins JavaScript com o 
Bootstrap. Os componentes gerados pelos plugins e as consideragoes sobre 
o uso da linguagem previstos no Bootstrap sao listados a seguir. 

• Visao geral 

• Transigoes 

• Janelas modais 

• Dropdown 

• Scrollspy 

• Abas 

• Tooltip 

• Popover 

• Alertas 

• Botoes 

• Collapse 

• Carousel 

• Affix 

• Personaliza^ao - Trata-se de uma ferramenta online para fazer download 
personalizado de acordo com as necessidades especificas de um projeto. 
Essa ferramenta encontra-se em http://getbootstrap.com/customize/ e seu uso 
e bem facil e intuitivo. 

Cada uma das segoes listadas anteriormente sera objeto de estudo e detalhamento 
neste livro. 
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1.2 Ferramentas de desenvolvimento 

Para desenvolver um layout e criar os componentes graficos de uma aplicagao web, 
voce precisa de um editor de texto, um navegador web e obviamente a estrutura 
de arquivos do Bootstrap. Se voce optou por estudar o assunto proposto neste 
livro, supoe-se que tern um conhecimento razoavel de marcagao HTML e folhas 
de estilos CSS, assuntos estes que nao fazem parte do escopo do livro. 

Nao vou indicar um editor de texto e navegador web, pois como voce conhece 
HTML e CSS, ja usa um deles. Assim, use o editor de texto e o navegador de sua 
preferencia. 


1.3 Download 

Na homepage do site do Bootstrap, em http://getbootstrap.com, voce encontra um 
link para download do Bootstrap. 

Sao disponibilizadas tres versoes para download denominadas Bootstrap, Source 
e SASS. A versao Bootstrap e a minima requerida para criagao com uso de todas 
as funcionalidades do Bootstrap, e e ela que usaremos neste livro. A versao Source 
inclui toda a documentagao do Bootstrap, e a versao SASS e para uso com o pre- 
-processador. 

Faga o download da versao Bootstrap, descomprima o arquivo compactado em 
uma pasta de sua livre escolha, e voce tera a estrutura de pastas e arquivos, como 
mostrado na figura 1.1. 

Na figura 1.1, repare que existem arquivos que tern uma forma compactada (mi- 
nificada - .min) e uma forma nao compactada. A forma nao compactada e para 
uso opcional em fase de produgao, pois sao arquivos comentados e estruturados 
visualmente para facil leitura por humanos. 

Depois de langado o projeto, esses arquivos deverao ser substituidos pelos seus 
equivalentes compactados, que sao mais leves e de carregamento mais rapido, mas 
nao se esquega de compactar o arquivo caso voce tenha feito alguma modificagao 
no original, o que e pouco provavel. 

A pasta-raiz obtida com a descompactagao do arquivo zipado do download 
denomina-se bootstrap-versao-dist, em que versao e a versao atual do Bootstrap 
(por exemplo, bootstrap-3.3.5-dist para o download da versao 3.3.5). Na pasta-raiz 
encontram-se tres subpastas - css, fonts, js -, e dentro delas, os arquivos, conforme 
mostrados na figura 1.1. 
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I bootstrap-versao-dist 

Dess 

• Q bootstrap.css 

• Q bootstrap.css.map 
|J| bootstrap.min.css 

• Q bootstrap-theme.css 

• [3] bootstrap-theme.css.map 
[3] bootstrap-theme.min.css 

* | fonts 

[3] glyphicons-halflings-regular.eot 
[3] glyphicons-halflings-regular.svg 
[3] glyphicons-halflings-regular.ttf 
[3j glyphicons-halflings-regular.woff 
[3l glyphicons-halflings-regular.woff2 



bootstrap.js 

bootstrap.min.js 

npm.js 

jquery.min.js I 


Figura 1.1 - Arquivos do download do Bootstrap. 

Observe na figura que alguns arquivos foram destacados com a marca de uma 
bolinha. Tais arquivos podem ser apagados da pasta caso voce nao os use em 
fase de produgao. Se usa-los, apague depois de langado o projeto, pois, como dito 
anteriormente, devem ser substituidos pelos seus correspondentes minificados. 

A seguir alguns comentarios sobre a finalidade dos arquivos. 

• bootstrap.css e o arquivo principal de estilizagao do Bootstrap em versao 
nao comprimida. Usa-se a mesma versao comprimida (ou minificada) 
bootstrap.min.css. Se voce pretende desenvolver uma folha de estilos persona- 
lizada, de a ela um nome tal como custom.css, e quando terminar, comprima 
o arquivo. Atrele sua folha de estilo personalizada ao documento criando 
um link para ela depois do link que aponta para bootstrap.min.css. 

• bootstrap-themexss e um arquivo de estilizagao do Bootstrap que adiciona 
efeitos especiais de sombras, gradientes, 3D etc. em componentes tais como 
botoes, paineis, caixas de destaque etc. Usa-se a mesma versao comprimida 
(ou minificada) bootstrap-theme.min.css. Se voce pretende adicionar tais efeitos 
especiais em sua interface, use este arquivo. O arquivo bootstrap-theme.min.css e 
um arquivo de uso facultativo. Nos exemplos constantes deste livro, usaremos 
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esta folha de estilos. Para verificar seus efeitos na pratica, comente na marcagao 
da segao head do exemplo, o link que aponta para essa folha de estilos. 


Alerta: Caso sua opgao seja por usar os efeitos especiais de estilizagao, o link para 
o arquivo bootstrap-theme.min.css devera vir na marcagao HTML depois do link 
para o arquivo bootstrap.min.css. 


• bootstrap.css.map e bootstrap-theme.css.map sao arquivos destinados a mapear 
arquivos CSS minificados e faze-los legiveis para humanos em ferramentas 
de debug, tipo as ferramentas do desenvolvedor nativas dos navegadores. 
Usam-se somente em fase de desenvolvimento de funcionalidades e temas 
CSS e nao tern efeito sobre o produto final (o site ou a aplicagao) criado. 

• bootstrap.js e o arquivo, em versao nao comprimida, que content os scripts 
que fazem funcionar os plugins nativos do Bootstrap. Usa-se a mesma 
versao comprimida (ou minificada) bootstrap.min.js. Se voce pretende desen- 
volver scripts personalizados, de ao arquivo um nome tal como custom.js e, 
quando terminar, comprima o arquivo. Atrele seus scripts personalizados 
ao documento criando um link para o arquivo depois do link que aponta 
para bootstrap.js. 

• npm.js e o arquivo para instalagao do Bootstrap com NPM (fora do escopo 
deste livro). 

O arquivo denominado jquery.min.js em destaque na figura naofaz parte do download. 
Caso seu projeto preveja uso de componentes que usam JavaScript (plugins na¬ 
tivos do Bootstrap), sera necessario carregar a biblioteca jQuery na versao 1.11.2 
ou posterior. Consulte o site da j Query para decidir qual e a versao mais atual (e 
posterior a j Query 1.11.2) indicada para os navegadores aos quais voce quer servir 
seu projeto. 

Assim, deve-se, obrigatoriamente, fazer o download da biblioteca no site 
http://jquery.com e ter o arquivo gravado na pasta js do download. Ele servira 
como fallback para o caso de falha no link para um CDN, como veremos no item 
[1.4] adiante. 

Essa e a configuragao basica do Bootstrap necessaria a criagao de layouts fixos, 
fluidos e responsivos. Com apenas o arquivo CSS bootstrap.min.css lincado ao 
documento voce podera comegar a explorar essa poderosa ferramenta, e com o 
progresso no estudo e a consequente necessidade de uso de componentes que 
dependem de JavaScript, ira precisar linear tambem o arquivo bootstrap.min.js. 
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1.4 Templates HTML 

O Bootstrap foi desenvolvido e otimizado para ser usado com marcagao HTML5. 
Assim o template minirno para criar uma aplicagao que use o Bootstrap e mos- 
trado a seguir. 

<!DOCTYPE html> 

<htnl lang="pt-br"> 

<head> 

<neta charset="utf-8"> 

<neta http-equiv="X-UA-Compatible" content="IE=edge"> 

<neta name="viewport" content="width=device-width, initial-scale=l"> 

<!-- Estas 3 neta tags deven obrigatorianente ser as prineiras na segao head 
<!-- As denials deven vir depots delas 

<title>Tenplate ninino para uso do Bootstrap</title> 

<link href=".,/bootstrap/css/bootstrap.nin.css" rel="stylesheet"> <!-- CSS do Bootstrap --> 
<!-- HTML5 shin and Respond.js para suporte dos elenentos HTML5 e das nedia queries ao IE8 —> 
<!-- Atengao: Respond.js nao funciona en paginas carregadas con uso do protocolo file:// 

<!--[if It IE 9]> 

<script src="https://oss.naxcdn.con/htnl5shiv/3.7.2/htnl5shiv.nin.js"></script> 
<script src="https://oss.naxcdn.con/respond/1.4.2/respond.nin.js"></script> 

<![endif]--> 

</head> 

<body> 

<hl>Titulo da aplicagao</hl> 

</body> 

</htnl> 

Com este template e posslvel desenvolver uma aplicagao web que use as funciona- 
lidades do Bootstrap que dependem apenas de estilizagao, por exemplo: tipografia, 
botoes, paineis, segao em destaque etc. Nao e posslvel usar as funcionalidades 
que dependem dos plugins JavaScript nativos do Bootstrap, por exemplo: barras 
de navegagao, janelas modais, slideshow etc. 


Alerta: Nos exemplos constantes deste livro nao sera considerado o suporte para 
o IE8. 


Caso voce queira usar, no seu projeto, os 12 plugins nativos do Bootstrap, lis- 
tados na segao JavaScript do item [1.1.4], devera incluir no template, mostrado 
anteriormente, a biblioteca jQuery e o aquivo bootstrap.min.js, como mostrado 
em destaque a seguir. 
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<body> 

<hl>Tltulo da aplicagao</hl> 

<!-- jQuery (caso se use plugins JavaScript do Bootstrap) --> 

<script src="http://code.jquery.con/jquery-1.11.2.nin.js" type="text/javascript"> 
</script> 

<script type="text/javascript"> // fallback para jQuery 
//<![CDATA[ 

(window.jQuery)||docunent.write('<script type="text/javascript" 
src=".. /bootstrap/js/jquery. nin. js"x\/script> ');//]]> 

</script> 

<!-- Bootstrap 

<script type="text/javascript" src="../bootstrap/js/bootstrap.nin.js"x/script> 

</body> 

</htnl> 

Conforme mostrado no codigo, e de boa pratica usar um CDN para linear para 
a biblioteca j Query Em nosso caso, escolhemos o CDN da jQuery Caso o link 
para o CDN apresente qualquer problema, existe um link alternativo (fallback) 
para um arquivo da biblioteca j Query hospedado no servidor da aplicagao e 
colocado na pasta js do download, conforme mostrado e comentado na figura 1.1. 

Alternativamente, voce pode usar o CDN Google, apontando para: 

http://ajax.googleapis.com/ajax/libs/jquery/ultima-versao/jquery.min.js 

ou o CDN da Microsoft, apontando para: 

http://ajax.aspnetcdn.com/ajax/jquery/jquery-ultima-versao.js 


Alerta: Ao optar por um CDN, confira se a versao que voce quer usar ja esta 
hospedada no CDN. Cole o enderego do arquivo na caixa de enderegos do 
navegador e certifique-se de que o link nao esta “quebrado” e aponta para o 
arquivo pretendido. 


Opcionalmente, voce podera usar o CDN do Bootstrap ( http://www : bootstrapedn. com/) 
para linear, tambem, os arquivos do Bootstrap como mostrado a seguir: 

<!-- Versao conpilada e ninificada das CSS --> 

<link rel="stylesheet" 

href="https://maxedn.bootstrapedn.con/bootstrap/3.3.5/css/bootstrap.nin.css"> 

<!-- Tena opcional --> 
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<link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
<!-- Versao conpilada e ninificada da JavaScript --> 

<script src="https://naxcdn.bootstrapcdn.coi'i/bootstrap/3.3.5/js/bootstrap.nin. js"> 
</script> 

Convem notar que o arquivo bootstrap.min.js content todos os plugins do Bootstrap. 
E muito provavel que o seu projeto use somente alguns deles. Para estas situagoes 
existe a possibilidade de personalizar o download, obtendo somente os plugins 
necessarios ao projeto. 

Convem notar que nestas situagoes devemos usar a versao do download perso- 
nalizado e nao um CDN que fornece todos os plugins. 

Para personalizar o download dos plugins e tambem das CSS e dos componentes 
do Bootstrap, visite a pagina http://getbootstrap.com/customize/ no site do Bootstrap. 


1.5 Bootlint 

Bootlint e uma ferramenta de desenvolvimento, oficial do Bootstrap, destinada a 
examinar a marcagao HTML criada para uma aplicagao ou um site desenvolvido 
com uso de Bootstrap e informar aos desenvolvedores possiveis “bugs” ou nao 
conformidades encontradas na marcagao. 

A ferramenta e fornecida em forma de bookmarklet (para ser instalada em um 
navegador); seu codigo e as instrugoes de instalagao podem ser encontrados no 
GitHub em http://kwz.me/I4. 

Das diversas formas de instalagao, a mais simples e imediata e arrastar o codigo 
JavaScript do bookmarklet, que se encontra no GitHub sob o titulo “Getting 
Started”, subtitulo “In the browser”, para a barra de favoritos do navegador. 

Depois de instala-la como favorito no navegador, abra a pagina web que content 
a marcagao HTML para o Bootstrap e abra tambem o console do navegador. 
Limpe o console e clique no bookmarklet criado nos favoritos. Como resultado 
sera aberta uma janela tipo alerta da JavaScript informando sobre a existencia 
ou nao de “bugs” na pagina. 

Feche a janela e, caso existam “bugs”, eles serao descritos sumariamente no console 
do navegador e um codigo sera fornecido. No GitHub, em http://kwz.me/IO, voce 
encontra a descrigao de cada codigo. 
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E altamente recomendavel instalar e usar esta ferramenta no seu ambiente de de- 
senvolvimento verificando constantemente as marcagoes criadas e nao deixando 
para verificar tudo no final do projeto. 


1.6 Modelo CSS e o box-sizing 

O Bootstrap declara, em sua folha de estilos, o moderno Modelo CSS modificado 
usando a propriedade CSS box-sizing de modo a excluir padding e nargin das dimen- 
soes dos boxes, conforme a regra de estilos mostrada a seguir. 

* { 

-webkit-box-sizing: border-box; 

-moz-box-sizing: border-box; 
box-sizing: border-box; 

} 

*:before, 

*:after { 

-webkit-box-sizing: border-box; 

-moz-box-sizing: border-box; 
box-sizing: border-box; 

} 

Esta declaragao pode conflitar com softwares de terceiros, tais como Google Maps 
e Google Search Engine, inseridos em uma pagina que use o Bootstrap, pelo fato 
de tais softwares usarem em suas CSS o Modelo CSS tradicional. 

Assim, esteja ciente de que se o layout em sua pagina “quebrar” por causa da 
insergao de um widget ou outro software qualquer pertencente a terceiros, sera 
necessario que voce localize e isole a parte da marcagao HTMLonde o problema 
ocorre e crie uma folha de estilo especifica para reverter o modelo CSS naquele 
trecho da marcagao, ou, em lugar de uma folha de estilos especifica, adicione regras 
CSS, conforme sugeridas a seguir, na folha de estilos do Bootstrap. 

Como regra geral, existem duas solugoes para estes casos. A primeira, reverter o 
modelo CSS para um elemento da marcagao; e a segunda, para uma determinada 
regiao da marcagao, conforme sugerido a seguir. 

/* Opgao 1: para um elemento da marcagao */ 

.element { 

-webkit-box-sizing: content-box; 

-moz-box-sizing: content-box; 
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box-sizing: content-box; 

} 

/* Opgao 2: para una regiao da narcagao cujo elenento ancestral deve receber a classe 
reset-box-sizing */ 

.reset-box-sizing, 

.reset-box-sizing *, 

.reset-box-sizing *:before, 

.reset-box-sizing *:after { 

-webkit-box-sizing: content-box; 

-noz-box-sizing: content-box; 
box-sizing: content-box; 

} 

1.7 Acessibilidade 

O Bootstrap content funcionalidades que facilitam o cumprimento das diretrizes 
de acessibilidade previstas pelo W3C. 

Para criar um link que permita as tecnologias assistivas pular o menu de navegagao 
e ir para o conteudo, sao previstas as classes sr-only e sr-only-focusable, que devem 
ser aplicadas a uma marcagao-padrao, conforme mostrado a seguir. 

<a href="#conteudo" class="sr-only sr-only-focusable">Pular para o conteudo</a> 

<!-- nenu de navegagao --> 

<div id="conteudo" tabindex="-l"> 

<!-- Conteudo principal da pagina --> 

</div> 

A marcagao mostrada, quando for o caso de se usar, deve ser colocada no initio 
da pagina. As classes sr-only e sr-only-focusable sao nativas do Bootstrap. 

A classe sr-only faz com que o texto do link nao seja visivel na tela, mas “visto” 
por tecnologias assistivas, tais como leitores de tela. 

Para usuarios sem restrigoes visuais que navegam com auxilio do teclado, a classe 
sr-only-focusable faz com que o texto do link se torne visivel quando o link recebe o foco. 

O par atributo/valor tabindex="-l" corrige bugs de foco em alguns navegadores. 

O exemplo pratico mostrado a seguir cria um link tipo "Pular navegagao" e 
encontra-se disponivel para consulta online. Nao se preocupe com a marcagao 
HTML que nao esteja em destaque. Ela e propria do Bootstrap e sera estudada 
no proximo capitulo. 
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<a href="#conteudo" class-'sr-only sr-only-focusable">Pular para o conteudo</a> 


<div class="row"> 

<div class="col-rnd-6"> 

<h3>Menu de navegagao</h3> 
<p>Extensa lista de links</p> 
<ul> 

<li><a href="#">link</ax/U> 
<!-- nais links --> 

</ul> 

</div> <!-- /..col-md-6 --> 

</div> <!-- /.row --> 


<div class="row"> 

<dlv class="col-nd-6"> 

<hl id="conteudo" tabindex="-l">Conteiido principal da pagina</hl> 

<p>bla...bla...bla..,bla</p> 

<! -- nais conteudo --> 

</div> <!-- /.col-nd-6--> 

</div> <!-- /.row --> 

[.../cl/pular-navegacao.html] 

Abra este arquivo em um navegador e pressione a tecla Tab. Essa agao ira revelar 
no topo da pagina o texto do link. A seguir, tecle Enter para navegar diretamente 
para o conteudo da pagina. 


1.8 Suporte 

O Bootstrap foi criado para funcionar em navegadores modernos tanto em desktop 
como em dispositivos moveis. Navegadores antigos falharao na estilizagao, mas a 
parte funcional da pagina sera preservada. 

Quanto ao Internet Explorer, o suporte e consistente nas versoes IE9 e superio- 
res. Se voce pretende servir sua aplicagao para o IE8, deve incluir os scripts shim 
e Respond.js que se destinam a possibilitar que aquele navegador reconhega os 
elementos da HTML5 e as regras media queries respectivamente, pois ele nao 
oferece suporte nativo para tais funcionalidades. Nao e do escopo deste livro 
detalhar as implicagoes e os detalhes de funcionamento e inclusao destes scripts. 
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Os exemplos constantes deste livro nao consideram o suporte para o IE8. 

Observe as tabelas 1.1 e 1.2 detalhando o suporte ao Bootstrap por dispositivos 
e navegadores. 


Tabela 1.1 - Suporte ao Bootstrap por navegadores 



Chrome 

Fi refox 

Internet Explorer 

Opera 

Safari 

Android 

SIM 

SIM 


nAo 

N/A 

iOS 

SIM 

N/A 

N/A 

NAO 

SIM 

Mac OS X 

SIM 

SIM 


SIM 

SIM 

Windows 

SIM 

SIM 

SIM 

SIM 

NAO 


Tabela 1.2 - Suporte ao Bootstrap pelos IE8 e IE9 


Funcionalidade 

Internet Explorer 8 

Internet Explorer 9 

border-radius 

NAO 

SIM 

box-shadow 

NAO 

SIM 

transform 

NAO 

SIM, com prefixo-ms 

transition 

nAo 

placeholder 

nAo 


Para suporte as funcionalidades HTML5 e CSS3 em geral, consulte o site caniuse 
( http://kwz.me/I5 ). 

Isso e tudo que voce precisa para comegar o estudo do Bootstrap. Nos proximos 
capitulos, detalharemos as funcionalidades do Bootstrap desenvolvendo exemplos 
praticos que mostram desde a criagao de simples componentes de interfaces ate 
o desenvolvimento de layouts complexos. 

Para os exemplos constantes deste livro, criamos uma pasta-raiz denominada 
codigos e, dentro dela, uma subpasta denominada bootstrap contendo o diretorio e 
os arquivos obtidos do Bootstrap, ou seja, renomeamos a pasta bootstrap-versao-dist 
mostrada na figura 1.1 para simplesmente bootstrap e mais subpastas para os 
capitulos (cl, c2, c3, c4 etc.) contendo os arquivos dos exemplos, tudo conforme 
mostrado na figura 1.2. 
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" I codigos 

P 1 bootstrap 
□ css 

|i| bootstrap.min.css 

@ bootstrap-theme.min.css 

~ | fonts 

g glyphicons-halflings-regular.eot 
g) glyphicons-halflings-regular.svg 
g) glyphicons-halflings-regular.ttf 
g| glyphicons-halflings-regular.woff 
|j=l glyphicons-halflings-regular.woff2 

|=1 bootstrap.min.js 
g| jquery.min.js 

Do 

g) exemplol.html 
g| exemplo2.html 
g) mais exemplos 


Figura 1.2 - Estrutura de pastas para arquivos dos exemplos do livro. 
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CAPI'TULO 2 

Fundamentos 


Neste capitulo estudaremos os fundamentos do Bootstrap. Sera mostrada a nor- 
malizagao via reset de valores de propriedades CSS. Mostraremos a criagao de um 
grid fixo para desenvolvimento de layouts e, no final do capitulo, estaremos dentes 
dos conceitos basicos de frameworks CSS em geral e em condigoes de comegar o 
estudo da estrutura do grid e das funcionalidades do Bootstrap. 


2.1 Marcagao HTML 

O Bootstrap foi criado para ser usado com a linguagem de marcagao HTML5. 
As suas funcionalidades foram desenvolvidas considerando certos elementos 
exclusivos daquela linguagem, bem como de propriedades CSS avangadas que 
requerem o uso da HTML5. 

Assim, a marcagao HTML de uma aplicagao devera obrigatoriamente corner o 
DOCTYPE da HTML5 como mostrado a seguir. 

<!DOCTYPE htnl> 

<htnl lang="pt-br"> 

</htnl> 


2.2 CSS reset 

O termo reset no contexto de programagao pode ser traduzido, usando linguagem 
nao tecnica, como a agao de “zerar” valores previamente definidos. 

CSS reset e uma tecnica inventada por Eric Meyer ( http://meyerweb.com/eric/tools/css/ 
reset/) no ano de 2007, amplamente usada desde entao, que consiste em se definir 
uma folha de estilos cuja finalidade e “zerar” valores CSS padrao dos navegadores. 
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Todo navegador tem uma folha de estilos nativa que define as propriedades CSS 
iniciais dos elementos da marcagao. Voce podera visualizar essa folha de estilos 
em agao ao criar um documento onde faga constar, por exemplo, cabegalhos (hi, 
h2, h3 etc.), paragrafos (p), listas (ol, ul, dl) etc. Ao visualizar o documento em um 
navegador, note que os conteudos dos elementos da marcagao tem uma estilizagao 
inicial, sem que voce tenha declarado qualquer folha de estilos. A cor de fundo 
do elemento body e branca, os textos sao em preto, cabegalhos sao em negrito com 
tamanhos de fonte diferentes, a fonte e da familia serif, existem margens entre 
cabegalhos e paragrafos, listas sao endentadas, e por ai vai. 

Se voce decidiu criar o documento sugerido, experimente visualiza-lo em diferentes 
navegadores e compare as renderizagoes. Vai notar, nos diferentes navegadores, 
que muitos dos estilos aplicados sao os mesmos, tais como cor de fundo bran¬ 
ca do elemento body, preta dos textos, negrito em cabegalhos, familia serif para 
fontes etc. Notara tambem que a renderizagao nao e exatamente a mesma, por 
exemplo, quando se trata do posicionamento e do tamanho dos textos na pagina. 
Isso acontece porque cada navegador adota sua folha de estilos propria e alguns 
valores CSS nessas folhas, tais como valores para as propriedades nargin, fine-height, 
font-size etc., diferem de um navegador para outro. Isso em determinados casos 
pode ser desastroso para o layout e pode exigir do desenvolvedor trabalho extra 
para tratar das inconsistencias entre navegadores resultantes das diferengas entre 
folhas de estilos nativas. 

Afinalidade das CSS reset, que nada mais sao do que um conjunto de declaragoes 
de estilos (uma folha de estilos), e padronizar, para os navegadores, a renderizagao 
inicial dos elementos da marcagao, zerando os valores de algumas propriedades 
CSS, tais como nargin e padding, e estabelecendo um valor-padrao para outras, tais 
como line-height, verticai-align, font-size, sobrescrevendo a folha de estilos nativa 
do navegador e resolvendo o problema da inconsistency de estilizagao inicial 
entre navegadores. 

No inicio de 2012, Nicolas Gallagher, um desenvolvedor trabalhando 
no Twitter, e Jonathan Neal criaram o projeto denominado normalize.css 
( http://necolas.github.com/normalize.css /), cuja proposta era disponibilizar para a 
comunidade de desenvolvedores front-end uma folha de estilos reset destinada a 
padronizar a renderizagao nativa dos navegadores. Na pagina do projeto, os au¬ 
to res discorrem sobre as diferengas e vantagens de usar normalizexss em relagao 
as CSS reset de Eric Meyer. 

O Bootstrap, o projeto HTML5 Boilerplate, a NASA, entre outras grandes 
companhias, atualmente usam o normalize.css. Mesmo que voce ja conhega as 
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tecnicas de CSS reset, aconselho a abrir a pagina contendo a folha de estilos 
de normalize.css clicando o link para download do arquivo no enderego web 
http://necolas.github.com/normalize.css/. Inspecione atentamente as declaragoes CSS, 
especule consigo mesmo sobre a fmalidade de cada uma delas e acrescente mais 
esse conhecimento ao seu acervo profissional. 

A folha de estilos normalize.css foi incorporada dentro da folha de estilo do 
Bootstrap. Assim, voce nao precisa criar link para o arquivo normalize.css, pois ele 
ja consta da folha de estilo nativa do Bootstrap. 


2.3 Sistema de grid para layout 

Criar layout CSS baseado em um grid inicial e uma tecnica que surgiu em 2007 e 
proporcionou o aparecimento de grids prontos, publicados por seus autores, para 
uso pelos desenvolvedores web. Tais grids constituem os chamados frameworks 
CSS para criagao de layouts ou simplesmente grids CSS, e o Bootstrap se baseia 
em grid. 

Um dos sistemas de grid CSS pioneiro denomina-se Blueprint 
(. http://www.blueprintcss.org/ ) e e usado ate hoje. Logo foram langados outros sis¬ 
temas, e atualmente existem dezenas deles, sendo que um dos mais conhecidos 
dos autores CSS e o sistema 960 Grid Sistem ( http://960.gs/). 

Usar um framework baseado em grid para desenvolver layouts CSS e um assun- 
to polemico e nao e do escopo deste livro discutir a conveniencia ou enumerar 
aspectos negativos e positivos do seu uso. No entendimento deste autor, dois 
aspectos sao indiscutiveis quando se trata de criar um layout baseado em grid 
versus a codificagao “a unha”: agilizagao do processo de criagao e possibilidade 
de usar as funcionalidades do grid de forma modular. 

A agilizagao do processo traz como beneficio imediato a redugao do tempo de 
trabalho para atingir o resultado final, e nos, desenvolvedores, sabemos muito 
bem como os prazos sao curtos. Um framework para criagao de layout bem pro- 
jetado e de natureza modular, ou seja, possibilita ao autor usar estritamente as 
funcionalidades especificas ao seu projeto, sem a necessidade de carregar arquivos 
desnecessarios. 


Dica: Uma das caracteristicas do Bootstrap e a sua natureza modular, materializada 
na existencia de uma interface grafica, no site do projeto, destinada a fazer o 
download personalizado do Bootstrap ( http://getbootstrap.com/customize/). 
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O sucesso de um projeto web comega com um planejamento bem feito no qual a 
escolha das ferramentas e o detalhamento das fases do desenvolvimento sao de 
importancia fundamental. Assim, usar um framework grid ou codificar “a unha” 
e uma decisao que cabe a equipe de desenvolvimento. 

Sem duvidas, o inventor ou os inventores dos sistemas de grid CSS, tal como e 
conhecido atualmente, tiveram um ideia brilhante e digna de admiragao, sem 
contar a enorme contribuigao que fizeram ao desenvolvimento web colocando 
nas maos dos autores uma ferramenta extremamente poderosa, agil e facil de 
aprender, destinada a criagao de layouts CSS. Atualmente, uma quantidade con- 
sideravel de sites foi desenvolvida com uso de grid CSS. 

O W3C langou em abril de 2011 um Rascunho de Trabalho denominado Grid 
Layout, renomeado em 22 de margo de 2012 como CSS Grid Layout, descrevendo 
funcionalidades para criagao de layouts baseados em grids. Essa especificagao esta 
no seu inicio de desenvolvimento e demandara algum tempo ate que possa ser 
usada em produgao. O curioso e que o Internet Explorer 10 e, desde dezembro de 
2012, o unico navegador que implementou as funcionalidades previstas naquela 
especificagao, devendo-se usar o prefixo proprietario -ns- para declarar as regras 
CSS nela previstas. Posteriormente a especificagao alterou a sintaxe, mas o IE 
continua a dar suporte a sintaxe antiga. 

A ideia que inspirou o sistema de grid CSS e muito simples. Uma vez conhecido 
o mecanismo de funcionamento, somos imediatamente levados a fazer a classica 
pergunta a nos mesmos: “Como eu nao pensei nisso?”. 

Grid significa malha e tecnicamente pode ser descrito como uma estrutura bi- 
dimensional formada por eixos (ou linhas retas) verticais e horizontais que se 
interceptam, criando uma estrutura de malha com celulas definidas pelas quatro 
intersegoes de eixos verticais com eixos horizontais. 

A diagramagao dos conteudos e a consequente criagao do layout se faz com uso 
dessa malha com suas celulas servindo de container para conteudos a diagramar 
(ou “layautar”). Celulas podem ser combinadas na horizontal e/ou na vertical de 
modo a criar containers de tamanhos diferentes. 

A tecnica de uso de grid em tipografia foi introduzida no curriculo academico 
da formagao de designers na metade dos anos 70 e comegou a ser usada para 
diagramar conteudos destinados a midia impressa. Somente por volta de 2007 
a tecnica foi usada para criagao de layouts CSS, e hoje em dia esta amplamente 
difundida nesta area. 
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A figura 2.1 mostra dois exemplos de estruturas de grids. 
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Grid 7x7 - simples Grid 7x7 - com espa?amento 


Figura 2.1 - Grids. 


2.4 Como e criado um grid CSS 

A marcagao HTML destinada a ser estilizada de forma a constituir um grid CSS 
e uma marcagao modulada e padrao na qual os elementos que constituem a es- 
trutura do layout sao definidos com uso de um atributo cujo valor e previamente 
defmido e serve como seletor CSS para definir as celulas do grid, tais como definir 
celulas unitarias ou combinar celulas horizontais de modo a formar containers 
para o layout. 


2.4.1 Container geral 

Vamos examinar um exemplo pratico bem simples de criagao de grid com a fi- 
nalidade de entender o funcionamento basico das estruturas para grid. Observe 
a marcagao HTML contendo uma folha de estilo incorporada mostrada a seguir. 


Dica : Nos exemplos deste livro, quando for o caso, usaremos folha de estilo 
incorporada com a finalidade de facilitar a leitura e o entendimento dos codigos. 
Voce com certeza conhece e sabe quando, como e por que usar folhas de estilos 
externas. 


• HTML 

<!DOCTYPE htnl> 
<htnl lang="pt-br"> 
<head> 
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<meta charset="utf-8"> 

<title>Livro Bootstrap Maujor</title> 

<style> 

body { margin: 0; font: 100% sans-serif; } 
hi { font-size: 160%; } 

.container { width: 940px; margin: 0 auto; background: #b5b5b5; } 

</style> 

</head> 

<body> 

<div class="container"> 

<hl>Meu primeiro grid - container geral</hl> 

</div> <!-- /.container --> 

</body> 

</html> 

[.../c2/grid-basico-1.html] 

A marcagao HTML mostrada, estilizada conforme a folha de estilo nela incor- 
porada, cria um container geral para um grid CSS fixo com largura de 940px 
centrado na tela. 

A renderizagao do arquivo anterior deve ficar conforme mostrado na figura 2.2. 



H ® Iivrobootstrap.localhost''codigos/c2''grid-basico-1.html v C \ | ^ Pesquisar [ ^ ^ ^ ^ © 1 “ w 


Meu primeiro grid - container geral 


Figura 2.2 - Container para um grid basico. 


2.4.2 Linha de celulas 

Vamos criar uma linha de celulas para nosso grid. Para isso precisamos definir 
quantas celulas colocaremos em uma linha e qual sera o espagamento entre elas. 
Escolhemos colocar em cada linha doze celulas separadas por 20px. Fazendo uns 
calculos simples, chegamos a conclusao de que cada celula devera ter 60px de 
largura, totalizando 60 x 12 = 720px, com um total de espagos de 11 x 20 = 220px. 
Somando 720 + 220, obtemos os 940px do container do layout, “fechando” as contas. 
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Vamos transformar essas premissas em marcagao HTML e CSS. A linha de celulas 
sera constituida pelo elemento div.row e cada uma das celulas por um elemento 
div.spanl. Observe a seguir o acrescimo de marcagao no HTML mostrado ante- 
riormente. 

• HTML 

1. <div class="container"> 

2. <hl>Meu primeiro grid - linha de celulas</hl> 

3. <div class="row"> 

4. <div class="spanl">l</div> 

5. <div class="spanl">2</div> 

6. <div class="spanl">3</div> 

7. 

8. <div class="spanl">ll</div> 

9. <div class="spanl">12</div> 

10. </div> <!-- /.row --> 

11. </div> <!-- /.container --> 

[.../c2/grid-basico-2.html] 

Codigo comentado: 

Linha(s) Descrigao 

Linhas 3 a 10 Elemento container div com a classe cujo valor e row e que sera o con¬ 
tainer das celulas. A tradugao da palavra inglesa “row” e linha. Esse 
container e uma linha de celulas do grid. 

Linhas 4 a 9 Doze elementos div com a classe cujo valor e spanl sao as doze celulas 
do grid. 

Para dispor uma linha contendo doze celulas, acrescentaremos na folha de estilos 
mostrada anteriormente as declaragoes em destaque no codigo a seguir. 

• CSS 

1. <style tyep="text/css"> 

2. body { margin: 0; font: 100% sans-serif; } 

3. hi { font-size: 160%; } 

4. .container { 

5. width: 940px; 

6. margin: 0 auto; 

7. background: #bSb5b5; 

8 . } 
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9. .row { margin-left: -20px; } 

10. .spanl { 

11. width: 60px; 

12. float: left; 

13. margin-left: 20px; 

14. background: #d5d5d5 

15. } 

16. .row:after { /* tecnica moderna para clear floats */ 

17. content: 

18. display: table; 

19. line-height: 0; 

20. clear:both; 


21 .} 

22. </style> 
Codigo comentado: 


Linha(s) Descriqio 


Linha 9 
Linhas 11 
Linhas 12 

Linha 13 


Linha 14 
Linhas 16 a 21 


Ver explicagao na linha 13. 

Define a largura de cada celula. 

Flutua as celulas a esquerda, tirando-as da sua posigao vertical padrao 
e colocando-as em linha ao lado da outra. 

Define um espagamento de 20px a esquerda para cada celula. Note que 
essa declaragao fara com que a primeira celula da linha seja deslocada 
para a direita. Para recoloca-la em sua posigao, declaramos uma margem 
negativa de 20px para o container da linha, como mostrado na linha 

9. 

A cor de fundo #d5d5d5 visa apenas a facilitar a visualizagao do grid 
criando contraste com a cor do container geral #b5b5b5 (ver linha 7). 
Uma vez que as celulas div.spanl fbram flutuadas dentro do seu con¬ 
tainer div.row, esse nao se estende na vertical, assumindo altura zero. 
E o classico comportamento de containers com floats. Para estender o 
container, precisamos declarar regras CSS para fazer o conhecido clear 
floats. Nesse exemplo, adotamos a moderna tecnica clear floats sem uso 
de marcagao. 


A marcagao HTML mostrada, estilizada conforme os acrescimos das regras CSS 
apresentadas, cria uma linha de doze celulas conforme a proposta de layout. 

A renderizagao do arquivo anterior deve hear conforme mostrado na figura 2.3. 
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^ li livrobootstrap.localhost ccdigc- 'c2grid-basico-2.html v C | [ Q Pesquisar ] ^ -<jl A & (§ 7 ® S ▼ 


Meu primeiro grid - linha de celulas 
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Figura 2.3 - Grid basico, linha de celulas. 



2.4.3 Unindo celulas 

Aproxima funcionalidade que o sistema de grid proporciona, e que estudaremos 
a seguir, e a possibilidade de unir duas ou mais celulas adjacentes para formar 
colunas. Por exemplo: unindo-se sucessivamente quatro celulas adjacentes, po- 
demos criar uma linha composta de tres colunas. 


Alerta: A partir daqui, vamos renomear o que ate aqui chamamos de celula. 
Em grids CSS, as chamadas celulas, bem como o resultado da uniao de celulas 
adjacentes, denominam-se colunas. Assim, no exemplo mostrado na figura 2.3, 
temos 12 colunas. 


Vamos exemplificar a uniao de celulas do grid tomando como objetivo a criagao 
de uma estrutura de layout de duas colunas. 

Uma coluna esquerda para o conteudo principal e uma coluna direita para o con- 
teudo auxiliar, tais como navegaqao, parceiros etc. E nossa intenqao que a coluna 
principal ocupe 2/3 da largura total da aplicaqao (em nosso exemplo, 940px), e 
a coluna de navegaqao, 1/3 daquela largura. 

Observe os acrescimos e as modificaqoes na marcaqao HTML. 

• HTML 

1. <div class="container"> 

2. <hl>Meu prineiro grid - criando colunas</hl> 

3. <div class="row"> 

4. <div class="span8"xh2>Coluna principal</h2x/div> 

5. <div class="span4"xh2>Coluna auxiliar</h2x/div> 

[.../c2/grid-basico-3.html] 
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Codigo comentado: 

Linha(s) Descriqio 

Linhas 3 e 10 Essas linhas definem o inicio e o final do container das celulas de uma 
linha do grid. Note que os elementos-filhos desse container sao dois 
elementos div em lugar dos doze elementos div.spanl que tinhamos no 
exemplo anterior. 

Linhas 4 e 5 Os dois elementos div, na linha, criam as colunas principal e auxiliar. 

Note que o valor do atributo class desses div termina com um numero 
(span8 e span4). Esses dois numeros somados resultam em 12. Como voce 
ja deve ter concluido, o numero no valor do atributo define o numero 
de celulas a serem combinadas para formar a coluna. 

O termo span em ingles, no presente contexto, pode ser traduzido para unir, abarcar 
ou abranger. Assim div.span8 deve ser lido como: um elemento div que une oito 
celulas do grid para criar o container de uma coluna do layout. 

Para criar as duas colunas do layout, modificaremos e acrescentaremos na folha 
de estilos mostrada anteriormente as declaragoes em destaque no codigo a seguir. 

• CSS 

1. <style type="text/css"> 

2. body { margin: 0; font: 100% sans-serif; } 

3. hi { font-size: 160%; } 

4. .container { 

5. width: 940px; 

6. margin: 0 auto; 

7. background: #b5b5b5; 

8 . } 

9. .row { margin-left: -20px; } 

10. .spanl { 

- width : 60px; 

tfr. float : left; 

IJi- margin-left : 20px; 

- background : #d5d5d5 

16. ,row:after { 

17. content: 

18. display: table; 

19. line-height: 0; 

20. clear:both; 

21 . } 
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22. [class*="span"] { 

23. float: left; 

24. margin-left: 20px; 

25. background: #d5d5d5 

26. } 

27. .span4 { width: 300px; } 

28. .span8 { width: 620px; } 

29. </style> 

Codigo comentado: 


Linha(s) Descriqio 


Linhas 10 a 15 


Linhas 22 a 26 


Linha 27 


Linha 28 


A declaragao da largura para cada seletor span* devera ser feita em 
regra CSS separada, assim a regra CSS contida nessa linha que declara 
valores para o seletor spanl sera substituida por outras regras mostradas 
a seguir. 

Os valores CSS comuns a todos os seletores do tipo span* sao aqui de- 
clarados. O seletor [class*="span"] aplica-se a todos os elementos cujo 
valor do atributo class seja uma palavra que comega com span (vale 
para spanl, span2, span3, span4 etc.). 

Aqui se define a largura da coluna formada pela uniao de quatro celu- 
las. A largura e obtida somando-se as larguras das celulas (60px) com 
a largura dos espagamentos entre elas (20px), ou seja, 4 x 60px + 3 x 
20px = 300px. 

Aqui se define a largura da coluna formada pela uniao de oito celulas. 
A largura e obtida somando-se as larguras das celulas (60px) com a 
largura dos espagamentos entre elas (20px), ou seja, 8 x 60px + 7 x 
20px = 620px. 


A marcagao HTML mostrada, estilizada conforme os acrescimos e as modificagoes 
nas regras CSS mostradas, cria as duas colunas conforme proposto anteriormente. 

A renderizagao do arquivo anterior deve ficar conforme mostrado na figura 2.4. 



Livro Bootstrap Maujor 
*■ ■ * Iivrobootstrap.localhost'codigos/c2/grid-basico-3.html 
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Meu primeiro grid - criando colunas 


Coluna principal 

Coluna auxiliar 


Figura 2.4 - Grid basico, criando colunas. 
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Para contemplar todas as possibilidades de combinagao de uniao de celulas, a 
folha de estilos do grid devera conter as seguintes declaragoes CSS: 

• CSS 


spanl 

{ 

width 

60px; 





span2 

{ 

width 

140px; 

}/* 

2x60 + 

1x20 

*1 

span3 

{ 

width 

220px; 

}/* 

3x60 + 

2x20 

*1 

span4 

{ 

width 

300px; 

}/* 

4x60 + 

3x20 

*1 

spans 

{ 

width 

380px; 

}/* 

5x60 + 

4x20 

*/ 

span6 

{ 

width 

460px; 

}/* 

6x60 + 

5x20 

*/ 

span7 

{ 

width 

S40px; 

}/* 

7x60 + 

6x20 

*/ 

span8 

{ 

width 

620px; 

}/* 

8x60 + 

7x20 

*/ 

span9 

{ 

width 

700px; 

}/* 

9x60 + 

8x20 

*/ 

spanlG 

{ 

width 

780px; 

}/* 

10x60 

9x2C 

*/ 

spanll 

{ 

width 

860px; 

}/* 

11x60 

10x20 */ 

spanl2 

{ 

width 

940px; 

}/* 

12x60 

11x20 */ 


2.4.4 Criando um rodape 

Para criar um rodape em nosso sistema de grid basico, basta declarar na marcagao 
HTML uma nova linha div. row que se estenda por toda a largura do container do 
grid div. container. O acrescimo de marcagao HTML e de regra CSS e mostrado, 
em destaque, a seguir. 

• HTML 

1. <div ciass="container"> 

2. <hl>Meu prineiro grid - criando rodape</hl> 

3. <div ciass="row"> 

4. <div ciass= l, span8''><h2>Coiuna principal</h2></div> 

5. <div ciass= l 'span4''xh2>Coiuna auxiliar</h2></div> 

10. </div> <!-- /.row das colunas --> 

11. <div class="row"> 

12. <div class="spanl2"xh2>Rodape</h2x/div> 

13. </div> <!-- /.row do rodape --> 

14. </div> <!-- /.container --> 

[.../c2/grid-basico-4.html] 
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,spanl2 { width: 940px; background: #eSe5e5; } /* Acrescino na folha de estxlo anterior 
*/ 


Alerta: No arquivo para esse exemplo define-se uma cor de fundo para a linha do 
rodape com a finalidade de destacar visualmente sua posigao. 


A renderizaqao do arquivo anterior deve ficar conforme mostrado na figura 2.5. 



Figura 2.5 - Grid basico, criando rodape. 


2.4.5 Aninhando conteudos 

Outra funcionalidade do sistema de grids para layout e a possibilidade de ani- 
nhar colunas dentro de colunas. Suponha que desejamos criar dentro da coluna 
principal tres blocos de conteudos em linha, ou seja, na horizontal. O acrescimo 
de marcaqao HTML e de regra CSS e mostrado a seguir. 

• HTML 

1. <div class="container"> 

2. <hl>Heu prineiro grid - aninhanento de colunas</hl> 

3. <div class="row"> 

4. <div class="span8"> 

<h2>Coluna principal</h2> 

<div class="row"> 

<div class="span2" style="background: #f5fSf5;"> 

<p>Conteudo aninhado a esquerda</px/div> 

<div class="span3" style="background: #f5fSf5;"> 

<p>Conteudo aninhado no centro</px/div> 

<div class="span3" style="background: #f5f5f5;"> 
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<p>Conteudo aninhado a direita</px/div> 
</div> <!-- .row dos conteudos aninhados--> 

</div> <!-- /.span8 coluna principal --> 

5. <div class="span4"xh2>Coluna auxiliar</h2x/div> 

[.../c2/grid-basico-5.html] 

• CSS 

.span2 { width: 140px; } /* Acrescimo na folha de estilo anterior */ 
.span3 { width: 220px; } /* Acrescimo na folha de estilo anterior */ 


Alerta: No arquivo para esse exemplo define-se uma cor de fundo, com CSS inline, 
para os conteudos aninhados, somente com a finalidade de destacar visualmente 
sua posigao. 


A renderizaqao do arquivo anterior deve ficar conforme mostrado na figura 2.6. 



Figura 2.6 - Grid basico, aninhamento de conteudos. 

Note que, sendo o container dos tres blocos de conteudos a coluna principal que 
e formada pela uniao de oito celulas, temos disponivel, para criar os blocos, estas 
oito celulas. Por essa razao, optamos, em nosso exemplo, pelo primeiro bloco, que 
foi resultado da uniao de duas celulas, e o segundo e o terceiro, de tres celulas. 

Assim, cabe a pergunta: e se precisarmos de tres blocos com larguras iguais? 
Com oito celulas disponlveis, temos duas possibilidades para multiplos de tres: 
unir seis celulas duas a duas e distribuir as duas celulas restantes entre as tres 
ou tomar uma celula tres vezes distribuindo as cinco celulas restantes entre elas. 

Em ambos os casos, terlamos que criar regras CSS personalizadas. 
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Conforme foi visto, os conceitos da construgao de layouts baseados em sistema 
de grid se fundamentam em uma marcagao HTML com sua estrutura geral 
padronizada, na qual os nomes dos atributos class sao predefinidos e servem 
de referenda para estabelecer regras CSS destinadas a posicionar e formatar os 
diferentes elementos do layout. 

Voce deve estar se perguntando: O layout e todo construido com elementos dlv? 
E a semantica? A resposta e: desde que voce preserve os atributos e seus valores 
predefinidos, use o elemento que voce quiser em substituigao ao elemento div. 
Mas lembre-se de que os elementos substitutes devem ser declarados no nivel de 
bloco, como sao os elementos div substituidos. 

Observe o arquivo constante do item [2.4.7] reescrito de forma semantica: 

• HTML 


1. 

<div class="container"> 


2. 

<header> 


3. 

<hl>Meu primeiro grid - senantica</hl> 


4. 

</header> 


5. 

<div class="row"> 


6. 

<section class="span8"> 


7. 

<header> 


8. 

<h2>Coluna principal</h2> 


9. 

</header> 


10. 

<div class=''row"> 


11. 

<div class="span2" style="background: 

#f5f5f5; 


<p>Conteudo aninhado a esquerda</p 

></div> 

12. 

<div class="span3" style="background: 

#f 5f5f5; 


<p>Conteudo aninhado no centro</p></div> 

13. 

<div class="span3" style="background: 

#f5f5f5; 


<p>Conteudo aninhado a direita</p></div> 

14. 

</div> <!-- .row dos conteudos aninhados- 

-> 

15. 

</section> <!-- /.span8 coluna principal --> 


16. 

<aside class="span4"xh2>Coluna auxiliar</h2x/aside> 

17. 

</div> <!-- /.row das colunas --> 


CO 

T—1 

<div class="row"> 


19. 

<footer class="spanl2"xh2>Rodape</h2x/footer> 


20. 

</div> <!-- /.row do rodape --> 


21. 

</div> <!-- /.container --> 



[.../c2/grid-basico-6.html] 
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O fa to e que em projetos complexos a solugao semantica proposta neste simples 
exemplo sera inviavel, e a verdade e que autores tem procurado solucionar este 
problema propondo algumas alternativas, tais como a criagao de nomes de classes 
semanticos a serem processados por SASS ou LESS e outras, mas nao existe uma 
solugao semantica a toda prova, e este e um problema ainda nao solucionado, 
comum a grande maioria dos frameworks CSS. 

As versoes anteriores ao IE9 do Internet Explorer nao reconhecem os novos 
elementos da HTML5, por isso e necessario usar um script para forgar aqueles 
navegadores a reconhecer e estilizar tais elementos. Quando for o caso, nos exem- 
plos deste livro, lincaremos para um script SHIM hospedado no CDN do Google, 
como mostrado no codigo a seguir. 

<head> 

<!--[if It IE 9]> 

<script src="http://htnl5shin.googlecode.con/svn/trunk/htnl5.js"></script> 

<![endif]--> 

</head> 


Dica: Existem outros scripts que cumprem a mesma fungao, tal como o Modernizr. 
Use o de sua preferencia e conforme as suas necessidades. 


2.4.7 Espa^ando colunas 

No grid do nosso exemplo, tal como no Bootstrap, o espagamento-padrao entre co- 
lunas e de 20px, contudo existe uma funcionalidade que permite ao autor aumentar 
esse espagamento, fazendo com que uma ou mais colunas sejam incorporadas para 
definir o espagamento. Por exemplo: considerando as doze colunas iniciais do grid, 
e possivel construir uma coluna a esquerda com sete celulas e outra a direita com 
tres celulas e com um espagamento entre elas de —12 - (3 + 7) = 2 — duas celulas 
(180px). Na figura 2.7, ha o diagrama que ilustra essa configuragao. 
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Quando usamos colunas para obter espagamento, em ambas as extremidades do 
espagamento e adicionado o espagamento-padrao de 20px, dal, em nosso exemplo, 
no qual usamos duas colunas para espagar, temos um espagamento total de 2x60 
+ 3x20 = 180px, como mostrado na figura 2.7. Por outro lado, a uniao de colunas 
para formar uma coluna de largura maior nao inclui os espagamentos-padrao 
nas extremidades. 

A marcagao HTML e as regras de estilo espedficas para criar o layout proposto 
no diagrama sao mostradas a seguir. 

• HTML 

<!DOCTYPE htnl> 

<htnl lang="pt-br"> 

<head> 

<meta charset="utf-8"> 

<title>Livro Bootstrap Maujor</title> 

<style type="text/css"> 

/* regras de estilo conforne exenplos anteriores */ 

,span3 { width: 220px; } 

.span7 { width: 540px; } 

.offset2 { nargin-left: 180px; } /* classe define largura do espaganento */ 

</style> 

</head> 

<body> 

<div class="container"> 

<hl>Bootstrap - espagando colunas</hl> 

<div class="row"> 

<div class="span7"> 

<h2>Coluna principal</h2> 

</div> <!-- ,span7 --> 

<div class="span3 offset2"> 

<h2>Coluna auxiliar</h2> 

</div> <!-- ,span3 --> 

</div><!- - /.row --> 

</div> <!-- /.container --> 

</body> 

</htnl> 

[.../c2/espacando-colunas.html] 


Conhega os livros do Maujor: http://livrosdomaujor.com.br 


52 Boostrap 3.3.5 

A renderizagao do arquivo anterior deve ficar conforme mostrado na figura 2.8. 



' Livro Bootstrap Mauji 

Iivrobootstrap.localhost'codigos/c2/espacando-colunas.html 


Cj | ^ Pesquisar | 4 4 A & ® | = ® T 


Bootstrap - espagando colunas 


Coluna principal 


Coluna auxiliar 


Figura 2.8 - Espagando colunas. 

Para unir colunas do grid e transforma-las em espagamentos, o nosso exemplo 
definine o valor offset* para o atributo class. Esse valor termina com um numero 
que define o numero de colunas a unir para criar o espagamento. Dessa forma, 
offset3 une tres colunas, offset7 une sete colunas, e assim por diante. As regras CSS 
que se aplicam a esses valores de classe sao mostradas a seguir. 


• CSS 


.offsetl 

,offset2 

,offset3 

,offset4 

,offset5 

,offset6 

,offset7 

,offset8 

,offset9 

.offsetlG 

.offsetll 


{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 


100px; } 
180px; } 
260px; } 
340px; } 
420px; } 
500px; } 
580px; } 
660px; } 
740px; } 
820px; } 
900px; } 


Note que o espagamento e definido atribuindo-se uma margem esquerda para 
a coluna. Assim, devemos declarar o valor offset* para o atributo class contido 
no elemento que cria a coluna a direita do espagamento. Em nosso exemplo, o 
elemento div que cria a coluna auxiliar. 


2.5 Grid fluido 

Todos os exemplos mostrados ate aqui foram criados de modo a obter um grid 
fixo com 940px de largura centrado na tela. Para obter um grid fluido basta de¬ 
clarar os valores das larguras em porcentagens. 
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2.6 Grid responsivo 

Para obter um grid responsivo basta declarar uma metatag apropriada e criar 
regras CSS com uso das media queries. 


2.7 Condusao 

Neste capitulo, estudamos os fundamentos de criagao e funcionamento de grids 
CSS. O Bootstrap e um grid CSS bem mais complexo que o mostrado neste capi¬ 
tulo, mais os principios aqui mostrados sao validos para o entendimento do seu 
funcionamento estrutural. 
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CAPITULO 3 

CSS 


Neste capitulo estudaremos os padroes basicos de estilizagao adotados pelo Boots¬ 
trap. Examinaremos as regras CSS padrao para o grid do Bootstrap, tipografia, co- 
digos e blocos de codigos. Veremos com detalhes as diferentes formas de estilizagao 
de tabelas, as funcionalidades CSS para apresentagao de formularios, a colegao de 
botoes pre-estilizados e prontos para uso na interface a projetar. Estudaremos os 
tres tipos de estilizagao para apresentagao de imagens e para finalizar o capitulo 
veremos quais sao e como utilizar os icones padrao fornecidos pelo Bootstrap. 


3.1 Grid 

O grid e a espinha dorsal de qualquer framework CSS. E ele que determina o 
posicionamento de cada elemento em uma pagina, sendo assim usado para cons- 
truir o layout. Um solido conhecimento das marcagoes HTMLpadrao disponiveis 
para estruturar layout e o primeiro requisito para se aprender a usar o Bootstrap. 
Ao construir um layout, por mais complexo que ele seja, e necessario saber quais 
sao os elementos, classes, atributos e estruturas de marcagao do grid usar. E, tao 
importante e fundamental quanto os elementos HTML sao os atributos a serem 
declarados na marcagao, pois sao eles que servirao de referenda para que a folha 
de estilo padrao do Bootstrap aplique as regras CSS previstas para criar os dife¬ 
rentes componentes e widgets padroes do Bootstrap. 

Portanto, desde ja, a exemplo do que estudamos no capitulo 1, esteja ciente de 
que um sistema de grids se baseia em marcagao predefinida e nomes de atributos, 
notadamente o atributo class tambem predefinidos. 
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3.1.1 Introdugao 

Uma aplicagao desenvolvida com Bootstrap deve estar em conformidade com 
algumas premissas mandatorias conforme descritas a seguir. 

• Estar contida em um elemento div container geral que recebe a classe de 
nome container conforme mostrado a seguir. 


<body> 

<div class="container"> 

<!-- Aplicagao criada con Bootstrap --> 

</div> <!-- /.container --> 

<body> 

<html> 

Opcionalmente, para obter um layout fluido (layout que preencha toda a largura 
da tela) o nome de classe container deve ser substituido por container-fluid. Nao se 
preocupe com este nome, adiante neste livro, veremos como usar e quais sao os 
efeitos de se usar, alternativamente, este nome. 


3.1.2 Breakpoints 

As CSS do Bootstrap foram desenvolvidas seguindo as premissas da filosofia 
“mobile first”. Isto significa que as regras de estilo iniciais foram criadas para 
contemplar um layout de uma coluna no qual os blocos de conteudos vao sendo 
posicionados na vertical um apos outro e suas larguras ocupam todo o espago 
disponivel em dispositivos moveis, com viewports de largura menor do que 768px. 

Para fins didaticos denominaremos, neste livro, as regras CSS para dispositivos 
com viewport menor do que 768px de regras CSS iniciais. Os criadores do Bootstrap 
estabeleceram que por padrao o primeiro breakpoint fosse em 768px. 

A partir da largura de viewport igual a 768px, usando-se media queries foi criado 
um conjunto de regras CSS a serem aplicadas juntamente com as regras CSS iniciais. 

Os criadores do Bootstrap estabeleceram que por padrao o segundo breakpoint 
fosse em 992px e usando-se media queries foi criado um conjunto de regras CSS 
a serem aplicadas juntamente com as regras CSS anteriores. 
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Os criadores do Bootstrap estabeleceram que por padrao o terceiro breakpoint 
fosse em 1200px e usando-se media queries foi criado um conjunto de regras 
CSS a serem aplicadas juntamente com as regras CSS anteriores para larguras de 
viewport maiores do que 1200px. 

Assim, em um layout criado com uso do Bootstrap, por padrao, e possivel que se 
defina ate quatro acomodagoes do layout de acordo com a largura da viewport. Em 
design responsivo ha um principio que diz que quem determina os breakpoints 
e o layout e nao a largura dos dispositivos. Assim sendo nao se deve estabelecer 
breakpoints “a priori”. 

O Bootstrap estabelece quatro breakpoints e na maioria dos casos eles atenderao 
seu layout. Se ajustes forem necessarios com mudanga, ou mesmo criagao de novos 
breakpoints o autor podera criar regras de estilo complementares ou mesmo usar 
LESS do Bootstrap para processar uma nova folha de estilo personalizada. Neste livro 
vamos desenvolver nossos exemplos considerando os quatro breakpoints mostrados. 

Para cada faixa de comportamento do layout de acordo com os breakpoints 
esta prevista uma largura maxima para o container geral da aplicagao conforme 
mostrado a seguir. 

• Ate 768px a largura tera o valor CSS auto. 

• Entre 768px e 992px a largura maxima e igual a 750px. 

• Entre 992px e 1200px a largura maxima e igual a 970px. 

• Acima de 1200px a largura maxima e igual a 1170px. 


3.1.3 Linhas do grid 

Criam-se linhas do grid com um elemento div que recebe a classe de nome row 
conforme mostrado a seguir, para criar duas linhas. 

<div class="container"> 

<div class="row"> <!-- Linha --> 

<!-- Colunas --> 

</div> <!-- /.row --> 

<div class="row"> <!-- Linha --> 

<!-- Colunas --> 

</div> <!-- /.row --> 

/div> <!-- /. container --> 
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• Dentro do elemento div que cria uma linha (div.row) insere-se como 
elemento-filho elementos para criar colunas. Colunas, formadas por ce- 
lulas ou constituida de uma celula somente, sao criadas com uso de um 
elemento div que recebe um ou mais atributos e cujo atributo classe tern 
valor cujo formato geral e col-xs-*, col-sn-*, col-nd-* e col-lg-*, sendo o sinal 

• um numero de 1 a 12 que define a quantidade de celulas que formam a 
coluna. O numero 12 e, por padrao, o numero maximo de colunas em uma 
linha. E posslvel unir celulas (cada uma das 12 colunas de uma linha) com 
a finalidade de se obter colunas com largura maior. Uma linha pode conter 
qualquer combinagao de colunas desde que o numero maximo de celulas 
nao ultrapasse a 12, podendo ser menor. A finalidade de cada um dos valores 
de classe para os div containers das celulas e conforme explicado a seguir. 

• col-xs-* - Telefones ; define colunas para dispositivos com viewport extra 
pequena (menor que 768px). 

• col-sn-* - Tablets ; define colunas para dispositivos com viewport pequena 
(de 768px ate 991px). 

• col-nd-* - Desktop medio ; define colunas para dispositivos com viewport 
media (de 991 px ate 1199px). 

• col-lg-* - Desktop largo; define colunas para dispositivos com viewport 
larga (maior que 1199px). 

Se for definido para uma linha um numero de colunas cuja soma total de celulas 
ultrapasse a 12, cada grupo de colunas a mais sera posicionado a seguir no fluxo, 
tal como, se houvesse uma “quebra de linha”. 

Caso contrario, se for definido para uma linha um numero de colunas cuja soma 
total de celulas seja menor do que 12, o grupo de celulas em falta sera posicionado 
a direita e nao recebera conteudos. 


3.1.4 Colunas do grid 

Conhecendo quais sao os breakpoints padrao do Bootstrap vamos examinar 
novamente os valores de classes para definir colunas, mostrados no item anterior. 
Cada uma das quatro classes mostradas se destina a aplicar, as regras de estilo 
previstas para um breakpoint, no elemento ao qual ela classe for definida. 
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3.1.4.1 Fundamentos 

O entendimento das premissas relacionadas a seguir e fundamental para uma perfeita 
compreensao e consequentemente uso correto e apropriado das classes destinadas a 
criagao de colunas. Conforme mostrado anteriormente os valores do atributo classe 
do container das colunas sao os seguintes: col-xs-*, col-sn-*, col-nd-*, col-lg-*. 

• Quaisquer que sejam os valores de classe definidos para um container 
de colunas, quando a largura da viewport for menor do que768px serao 
aplicadas, no container, as regras de estilo iniciais. 

• Se nao for definido um valor de classe para o container da coluna as regras 
de estilo aplicadas ao container serao as regras de estilo iniciais, ou seja, 
aquelas para viewport menor do que 768px (mobile-first) e o layout tera 
comportamento mobile em todas as larguras de viewport. Entao, para que 
serve col-xs-*? Para sobrescrever o comportamento colunar em viewport 
menor do que 768px, permitindo, por exemplo, que se crie um layout de 
duas, ou mais colunas em larguras de viewport menores do que 768px. 

• Se for definido somente o valor col-sn-* o container tera o comportamento 
colunar em larguras de viewport menores que 768px e outro em maiores. 

• Se for definido somente o valor col-nd-* o layout tera o comportamento 
colunar em larguras de viewport menores que 992px e outro em maiores. 

• Se for definido somente o valor col-lg-* o layout tera o comportamento 
colunar em larguras de viewport menores que 1200px e outro em maiores. 

• O efeito de se definir dois ou mais valores de classe faz com que o compor¬ 
tamento do layout varie de acordo com os valores de classe definidos e os 
respectivos breakpoints. 

Vejamos alguns exemplos praticos que ilustram a criagao de colunas em diferentes 
situagoes. 

Exemplo 7 

• CSS - Coloca uma cor de fundo e uma borda nas colunas com a finalidade de 

facilitar a visualizagao. 

.row div[class A ="col-"] { 
background: #fafafa; 
border:lpx solid #ccc; 

} 
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<div class="container"> 

<div class="row"> 

<div class="col-nd-l">.col-nd-l</div> 

<div class="col-nd-l">.col-nd-l</div> 

<!- repete 9 vezes --> 

<div class="col-nd-l">.col-nd-l</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-8">.col-nd-8</div> 

<div class="col-nd-4">.col-md-4</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-4">.col-md-4</div> 

<div class="col-nd-4">.col-md-4</div> 

<div class="col-nd-4">.col-md-4</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-6">.col-md-6</div> 

<div class="col-nd-6">.col-md-6</div> 

</div> <!-- /.row --> 

</div> <!-- /.container --> 

[.../c3/dasses-para-criar-colunas.html] 

Neste exemplo usou-se o valor de classe col-nd-* para obter um layout destinado 
a dispositivos moveis (telefones e tablets) em viewport abaixo de 992px e outro 
para desktop em viewport acima de 992px. 

Observe na figura 3.1 o resultado da aplicagao da classe col-nd-* em diferentes 
larguras de viewport. Mostramos na figura a largura maxima padrao definida 
pelo Bootstrap para o container geral da aplicagao (div.container) para diferentes 
larguras de viewport. 
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VIEWPORT >1200px 
— max-width: 1170px — 


col-md -1 col-md -1 col-md -1 col-md -1 col-md -1 .col-md -1 

_| col-md-4 

| col-md-4 


.col-md-4 


VIEWPORT >992 e <1200px 
- max-width: 970px- 


col- 

md -1 

col-md-8 

col-md-4 

col-md-6 


col- 

md -1 


col- 

md -1 


col- 

md -1 

col-md-4 


VIEWPORT >768px e <992px 
- max-width: 750px- 


col-md -1 

col-md -1 


col-md-6 

col-md-6 


VIEWPORT <768px 
-width: auto - 


col-md-l 

.col-md -1 

col-md -1 

col-md -1 

col-md -1 

col-md-1 

col-md -1 

.col-md -1 

col-md -1 

col-md -1 

col-md-1 

col-md -1 


.col-md-8 

col-md-4 


col-md-4 

col-md-4 

.col-md-4 

col-md-6 

col-md-6 


Figura 3.1 - Classes para criar colunas. 

Esse exemplo pratico demostra a aplicagao de classe para criagao de colunas e 
encontra-se disponivel para consulta online. 


3.1.4.2 Numero maximo de colunas em uma linha 

Sabemos que o numero maximo de celulas em uma linha e 12 e ja dissemos que 
se um numero maior de celulas for declarado para uma linha, as celulas a mais 
serao posicionadas abaixo como se existisse uma “quebra de linha”. No exemplo a 
seguir mostramos a marcagao para uma linha que comprova este comportamento. 

• CSS 

.row div[class A ="col-"] { 
background: #fafafa; 
border:lpx solid #ccc; 

} 

.row { border: 2px dotted black; } 
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<div class="container"> 

<div class="row"> 

<div class="col-xs-6">6</div> 
<div class="col-xs-4">4</div> 
<div class="col-xs-5">5</div> 
<div class="col-xs-3">3</div> 
<div class="col-xs-7">7</div> 
</div> 

</div> <!-- /.container --> 


[.../c3/numero-maximo-colunas-em-linha.html] 

Neste exemplo definiu-se uma linha com um numero total de celulas igual a 25 
celulas. 

Foi incorporada ao documento uma folha de estilo adicional para aplicar cor de 
fundo e borda em cada coluna e uma borda pontilhada na linha com a finalidade de 
facilitar a visualizagao do resultado. Observe na figura 3.2 a renderizagao da linha. 


6 4 

5 3 

7 


Figura 3.2 - Numero maximo de colunas em uma linha. 

Notar que a soma das celulas das tres primeiras colunas e 6+4+5 = 15 > 12. Assim 
as duas primeiras colunas 6+4=10<12 sao acomodadas e a terceira coluna vai 
para baixo. 

A soma celulas das tres ultimas colunas e 5+3+7 = 15 > 12 e o processo se repete. 

Notar que o espago que “sobra” em cada fileira e igual ao numero de celulas que 
faltam para completar 12 na fileira. 

Esse exemplo pratico demostra o comportamento das colunas quando se declara 
mais de 12 colunas em uma linha e encontra-se disponivel para consulta online. 
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3.1.4.3 Espa^ando colunas 

O Bootstrap preve valores para o atributo classe do tipo col-xs-offset-*, 
col-sn-offset-*, col-md-offset-*, col-lg-offset-* nos quais o sinal * e um numero inteiro 
de 1 a 11. Estes valores se destinam a criar um espagamento a esquerda da coluna. 
O numero de celulas que define a largura do espagamento e computado na soma 
do total de celulas que cabem em uma linha, que como ja vimos e 12. Observe o 
exemplo a seguir que mostra o espagamento entre colunas em tres linhas diferentes. 

• CSS 

.row div[class A ="col-"] { 
background: #fafafa; 
border:lpx solid #ccc; 

} 

.row { margin-bottom: 5px; } /* separa linhas para facilitar visualizagao */ 

• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-nd-3">3</div> 

<div class="col-nd-2 col-md-offset-3">2</div> 

<div class="col-nd-l col-md-offset-3">l</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-5 col-md-offset-2">5</div> 

<div class="col-nd-3 col-md-offset-1 ">3</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-8 col-md-offset-2">8</div> 

</div> <!-- /.row --> 

</div> <!-- /.container --> 

[.../c3/espacando-colunas.html] 

Neste exemplo as tres linhas foram definidas com espagamento entre colunas 
conforme descrito a seguir. 

Na primeira linha temos uma coluna com tres celulas a seguir uma coluna com 
duas celulas com um espagamento de tres celulas a esquerda e a seguir uma 
coluna com uma celula com um espagamento de tres celulas a esquerda. A soma 
total de celulas e 12. 
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Na segunda linha temos uma coluna com cinco celulas com um espagamento 
de duas celulas a esquerda, a seguir uma coluna com quatro celulas com um 
espagamento de uma celula a esquerda. A soma total de celulas e 12. 

Na terceira linha temos uma coluna com oito celulas com um espagamento de 
duas celulas a esquerda perfazendo um total de 11 celulas na linha. Notar que o 
espago de uma celula que falta para totalizar as 12 celulas na linha e posicionado 
a direita na linha. 

Foi incorporada ao documento uma folha de estilo adicional para aplicar cor de 
fundo e borda em cada coluna e uma margem entre linhas com a finalidade de 
facilitar a visualizagao do resultado. Observe na figura 33 mos a renderizagao 
dos espagamentos nas tres linha. 


3 

espago de 3 celulas 


2 

espago de 3 celulas ^ 

espago de 2 celulas 

5 


espago de 

1 celula 

4 

espago de 2 celulas 


8 


"sobra" 

espago de 2 celulas 


Figura 3.3 - Espagando colunas. 

Esse exemplo pratico demostra como criar espagamento entre colunas e encontra- 
-se disponivel para consulta online. 

3.1.4.4 Aninhando colunas 

E valido aninhar colunas em tantos niveis quando se queira. Para aninhar colunas 
basta que se crie linhas dentro de colunas existentes. Neste caso as linhas criadas 
conterao colunas aninhadas na coluna onde a linha foi criada. No exemplo a se¬ 
guir em uma linha com duas colunas, uma com oito celulas e outra com quatro 
celulas aninhou-se na primeira coluna uma linha com 3 celulas e na segunda 
uma com duas celulas. 

• CSS 

.row div[class A ="col-"] { 
background: #fafafa; 
border:lpx solid #ccc; 
font-size: 30px; 
font-weight: bold; 
padding-top: 10px; 
padding-botton: 10px; 
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} 

.row .row > div[class A ="col-"] { 
background: #flflfl; 
border:lpx solid #black; 
font-size: 20px; 
font-weight: bold; 

} 

• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-nd-8"> 


<div class="row"> 

<div class="col-i'id-2">2</div> 

<div class="col-i>id-7">7</div> 

<div class="col-i'id-3">3</div> 

</div> <!-- /.row --> 

</div> 

<div class="col-nd-4"> 

4 

<div class="row"> 

<div class="col-nd-6">6</div> 

<div class="col-i'id-6">6</div> 

</div> <!-- /.row --> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.container --> 

[.../c3/aninhando-colunas.html] 

Neste exemplo as tres linhas foram definidas com espagamento entre colunas. 

Foi incorporada ao documento uma folha de estilo adicional para aplicar cor de 
fundo e borda em cada coluna com a finalidade de facilitar a visualizagao do 
resultado. 

Observe na figura 3.4 a renderizagao das colunas aninhadas. 

Esse exemplo pratico demostra como aninhar colunas e encontra-se disponlvel 
para consulta online. 
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Figura 3.4 -Aninhando colunas. 


Dica: Notar que para o grid do Bootstrap o aninhamento de colunas se faz de 
modo a que o numero maximo de colunas aninhadas seja sempre igual a doze, 
independentemente do nivel de aninhamento, pois a largura das celulas e definida 
em porcentagem. 


3.1.4.5 Ordenando colunas 

O Bootstrap preve os valores de classe col-xs-push-*, col-sn-push-*, col-md-push-*, 
col-lg-push-* que se destinam a “empurrar” a coluna para a direita e os valores 
col-xs-pull-*, col-sm-pull-*, col-nd-pull-*, col-lg-pull-* que se destinam a “puxar” 
a coluna para a esquerda fazendo com que elas troquem de posiqao, ou seja, 
alterando sua ordem. Observe o exemplo mostrado a seguir que esclarece o uso 
destas classes. 

• CSS 

.row div[class A ="col-"] { 
background: #fafafa; 
border:lpx solid #ccc; 
font-size: 30px; 
font-weight: bold; 
padding: 10px 0; 

} 

• HTML 

<div class=''container"> 

<div class="row"> 

<div class="col-nd-5 col-nd-push-7">5</div> 

<div class="col-nd-7 col-nd-pull-5">7</div> 

</div> <!-- /.row --> 

</div> <!-- /.container --> 

[.../c3/ordenando-colunas.html] 
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Neste exemplo, na marcagao HTML, a coluna 5 esta a esquerda e a coluna 7 a 
direita e na renderizagao ha troca das posigoes. 

Esse exemplo pratico demostra como ordenar colunas e encontra-se disponlvel 
para consulta online. 


3.1.5 Container fluido 

Vimos no item anterior que para cada faixa de largura de viewport foi estabelecida 
uma largura maxima para o container geral da aplicagao. Este comportamento 
pode ser alterado de modo a que em qualquer largura de viewport o layout se 
comporte como fluido, ou seja, expanda para ocupar toda a largura disponivel. 
Para isso basta que o valor da classe do elemento div container geral seja alterado 
de container para container-fluid como mostrado a seguir. 

• HTML 

<div class=" container container-fluid"> 

<!-- igual ao exenplo nostrado na figura 3.1 --> 

</div> <!-- /.container-fluid --> 

[.../c3/container-fluido.html] 

Neste exemplo mostramos como alterar o exemplo mostrado na figura 3.1 para 
que se comporte como layout fluido. 

Esse exemplo pratico demostra como tornar o layout fluido e encontra-se dispo¬ 
nivel para consulta online. 

E valido usar-se os dois tipos de container (.container e .container-fluid) em uma 
mesma pagina. Um exemplo comum e aquele no qual o site adota uma faixa 
que sempre se estende por toda a largura da viewport (faixa fluida) para o topo 
e outra para o rodape enquanto os conteudos, em telas maiores, sao renderizados 
em uma largura menor que a da viewport e centralizados na tela. 

A marcagao HTML mostrada a seguir esclarece a estrutura geral para esta situagao. 

• HTML 

<header class="container-fluid">TOPO</header> 

<nain class="container">CONTEUDOS</nain> 

<footer class="container-fluid"></footer> 


Conhega os livros do Maujor: http://livrosdomaujor.com.br 



67 


Capi'tulo 3 ■ CSS 

3.2 Tipografia 

Antes de comegar a desenvolver layouts, e necessario aprofundar os conhecimentos 
que ja adquirimos nos capltulos anteriores, com a finalidade de conhecer e saber 
usar as poderosas ferramentas que temos em maos quando optamos pelo uso do 
Bootstrap. Vamos falar de estilizagao dos elementos tipograficos de uma aplicagao 
web. Servira de base para nossos estudos de estilizagao, o arquivo bootstrap.css. 


Alerta: Os valores das propriedades CSS mostrados neste capitulo sao valores 
padrao do Bootstrap. Caso alguns, ou muitos, desses valores nao seja o mais 
indicado para o seu projeto, nao se preocupe, pois voce nao precisara editar 
e alterar manualmente a folha de estilo. Voce podera baixar uma versao 
personalizada da folha de estilo em http://getbootstrap.com/customize/. 


3.2.1 Estilizagao do elemento body 

As declaragoes CSS para o elemento body sao mostradas a seguir. 

• CSS 

body { 
margin: 0; 

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 

font-size: 14px; 

line-height: 1.42857143; 

color: #333; 

background-color: #fff; 

} 

A famllia de fontes para todos os conteudos textuais dos elementos do Bootstrap, 
exceto para os elementos code, kbd, pre e sample e definida no seletor body. 

O tamanho de fonte padrao e 14px com a propriedade line-height definida em 
1.42857143 que para um tamanho de fonte de 14px resulta em 1.42857143 x 14 = 
20px. A cor dos textos e a preta e do fundo a branca. 
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3.2.2 Estilizagao dos elementos hi - h6 

Os tamanhos de fonte para os niveis de cabegalhos sao conforme mostrados a 
seguir. 

hi, .hi { font-size: 36px; } 
h2, .h2 { font-size: 30px; } 
h3, ,h3 { font-size: 24px; } 
h4, .h4 { font-size: 18px; } 
h5, .h5 { font-size: 14px; } 
h6, .h6 { font-size: 12px; } 

Notar que esta prevista uma classe com o nome igual ao nome da tag de cabegalho 
e se destina a uso geral. 

O elemento snail quando usado dentro de um elemento de cabegalho recebe 
uma estilizagao especial em cor cinza clara e tamanho de fonte 80% do tamanho 
de fonte do cabegalho. Opcionalmente pode-se usar a classe snail para obter o 
mesmo efeito. 

O exemplo mostrado a seguir esclarece esta estilizagao para cabegalhos. 

• HTML 

<div class="container"> 

<div class=''row"> 

<div class="col-nd-12"> 

<hl>hl - Cabegalho nivel 1 <snall>Texto snall</snall></hl> 

<h2>h2 - Cabegalho nivel 2 <snall>Texto snall</snall></h2> 

<h3>h3 - Cabegalho nivel 3 <snall>Texto snall</snall></h3> 

<h4>h4 - Cabegalho nivel 4 <snall>Texto snall</snall></h4> 

<h5>h5 - Cabegalho nivel 5 <snall>Texto snall</snall></h5> 

<h6>h6 - Cabegalho nivel 6 <snall>Texto snall</snall></h6> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.container --> 

[.../c3/estilizagao-de-cabecalhos.html] 

Observe na figura 3.5 o resultado da aplicagao da estilizagao padrao em elementos 
de cabegalho, bem como o efeito do elemento snail. 
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hi - Cabegalho nivel 1 Texto small 

h2 - Cabegalho nivel 2 Texto small 

h3 - Cabegalho nivel 3 Texto small 

h4 - Cabegalho nivel 4 Texto small 
h5 - Cabegalho nivel 5 Texto small 
h6 - Cabegalho nivel 6 Texto small 


Figura 3.5 - Estilizagao de cabegalhos. 

Esse exemplo pratico demostra a estilizagao padrao de elementos para cabegalhos 
e encontra-se disponlvel para consulta online. 


3.2.3 Estilizagao de elementos para textos inline 

Os elementos nark, del, ins, s, u, em, strong, i, b e snail sao usados e estilizados con- 
forme previstos nas especificagoes para a HTML5. 

O exemplo mostrado a seguir esclarece a estilizagao de elementos para textos inline. 


• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-nd-12"> 

<nark>Estilizagao do elenento></nark> <code>nark</code<hr> 
<del>Estilizagao do elenento</del> <code>del</code><hr> 
<ins>Estllizagao do elenento</ins> <code>ins</code><hr> 
<s>Estilizagao do elenento</s> <code>s</code><hr> 

<u>Estilizagao do elenento</u> <code>u</code><hr> 

<en>Estilizagao do elenento</en> <code>en</code><hr> 
<strong>Estilizagao do elenento</strong> <code>strong</code><hr> 
<i>Estilizagao do elenento</i> <code>i</code><hr> 

<b>Estilizagao do elenento <code>b</code></b><hr> 
<snall>Estilizagao do elenento <code>snall</code></snall> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.container --> 

[.../c3/estilizacao-de-elementos-para-textos-inline.html] 
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Observe na figura 3.6 o resultado da aplicagao da estilizagao padrao em elementos 
para textos inline. 

Estilizagao do elemento mark 
Est ili zagao do c l omcnto del 
Estilizagao do elemento ins 
Est ili zagao do c l cmonto s 

Estilizagao do elemento u 
Estilizagao do elemento em 
Estilizagao do elemento strong 
Estilizagao do elemento i 
Estilizagao do elemento b 
Estilizagao do elemento small 

Figura 3.6 - Estilizagao de elementos para textos inline. 

Esse exemplo pratico demostra a estilizagao padrao de elementos para textos 
inline e encontra-se disponivel para consulta online. 


3.2.4 Estilizagao do elemento abbr 

O elemento abbr e usado para marcar abreviaturas em geral e estilizado de modo 
a mostrar uma janela tooltip com o significado da abreviatura quando o usuario 
coloca o ponteiro do mouse sobre ela. O texto do tooltip e definido no atributo 
title do elemento abbr. 

Alem desse comportamento, o Bootstrap preve ainda o valor initialisn para o 
atributo classe do elemento abbr. Definir esse valor de classe no elemento abbr faz 
com que a abreviatura seja renderizada com um tamanho de fonte igual a 90% 
do tamanho de fonte padrao da abreviatura. 

O exemplo mostrado a seguir esclarece a estilizagao deste elemento. 

• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-nd-12"> 
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<p><abbr title="HyperTextMarkupLanguage">HTML</abbr> e a 
linguagen de narcagao para aplicagoes web.</p> 

<p><abbr title="HyperTextMarkupLanguage" class="initialisn">HTML</abbr> e a 
linguagen de narcagao para aplicagoes web.</p> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.container --> 

</body> 

</html> 

[.../c3/estilizacao-do-elemento-abbr.html] 

Esse exemplo pratico demostra a estilizagao padrao do elemento abbr e a estili- 
zagao com uso da classe initialisn e encontra-se disponlvel para consulta online. 

3.2.5 Estilizagao do elemento address 

O elemento address, introduzido nas especificagoes pela HTML5 e usado para 
marcar informagoes de contato relacionadas aos conteudos de um elemento article 
ou ao conteudo do elemento body como um todo. Nao deve ser usado para marcar 
enderego postal generalizadamente exceto nos casos em que o endere^o postal 
fornega informa^oes de contato relacionadas aos conteudos citados. 

Voce pode visualizar os efeitos de estilizagao padrao do Bootstrap para o elemento 
address consultando o arquivo e mostrado a seguir. 

• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-nd-12"> 

<p>Contato con o autor do artigo:</p> 

<address> 

<strong>Mauricio Sany Silva</strong><br> 

Rua: General Paulino 123 sala 4567<br> 

<abbr title="Codigo de endereganento postal">CEP</abbr>: 00000-000<br> 
Carapena, AM. 

</address> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.container --> 

[.../c3/estilizacao-do-elemento-address.html] 
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Esse exemplo pratico demostra a estilizagao padrao do elemento address e encontra- 
-se dispomvel para consulta online ou download e consulta local. 


3.2.6 Estilizagao dos elementos blockquote e cite 

O elemento blockquote e usado para marcar um bloco de texto, ou segao, contendo 
uma citagao extralda de uma fonte externa ao documento. O elemento cite destina- 
-se a marcar o tltulo de um trabalho, ou obra, por exemplo: o tltulo de um livro, 
um filme, um programa de TV, um ensaio, um poema, uma musica, um jogo etc. 

Nao confundir o elemento cite com o atributo cite, esse deve ser usado com os 
elementos blockquote e q e cujo valor deve ser um URLapontando para o enderego 
web de onde foi extralda a citagao marcada por aqueles elementos. 

Voce pode visualizar os efeitos de estilizagao padrao do Bootstrap para o elemento 
blockquote e para o uso do valor blockquote-reverse para o atributo class consultando 
o arquivo mostrado a seguir. 

• HTML 

<!DOCTYPE htnl> 

<div class="container"> 

<div class="row"> 

<div class="col-md-12"> 

<blockquote cite="http://www.editoranovatec.con.br..."> 

<p>A tentativa de o W3C evoluir...</p> 

<footer> 

<cite title="HTML5 A linguagen de narcagao que revolucionou a web">Maujor, 

...</cite> 

</footer> 

</blockquote> 

</div> 

</div> <!-- /.row --> 

<hr> 

<div class="row''> 

<div class="col-nd-12"> 

<blockquote cite="http://www.editoranovatec.con.br..." class="blockquote-reverse"> 
<p>A tentativa de o W3C evolui...</p> 

<footer> 

<cite title="HTML5 A linguagen de narcagao que revolucionou a web">Maujor, 

...</cite> 
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</footer> 

</blockquote> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.container --> 

[.../c3/estilizacao-do-elemento-blockquote.html] 

A renderizagao do arquivo anterior e conforme mostrado na figura 3.7. Observe 
o efeito da estilizagao padrao do Bootstrap para os elementos blockquote e cite e o 
efeito do atributo classe com valor blockquote-reverse destinado a alinhar o conte- 
udo de blockquote a direita. 


A tentativa de o W3C evoluir a HTML para conformidade com XML fracassou, porque 
as paginas XHTML servidas como XML que contenham qualquer violagao com a 
sintaxe XML causarao urn erro fatal de parseamento e a pagina simplesmente nao 
sera renderizada. 

— Maujor, no seu livro HTML5 A linguagem de marcagao que revolucionou a web 


A tentativa de o W3C evoluir a HTML para conformidade com XML fracassou, porque as 
paginas XHTML servidas como XML que contenham qualquer violagao com a sintaxe 
XML causarao urn erro fatal de parseamento e a pagina simplesmente nao sera 

renderizada. 

Maujor, no seu livro HTML5 A linguagem de marcagao que revolucionou a web — 


Figura 3.7- Estilizagao dos elementos blockquote e cite. 


3.2.7 Estilizagao de elementos de lista 

Os elementos ul, ol e dl destinados a marcar listas receberam uma estilizagao 
padrao do Bootstrap cabendo destacar o valor list-unstyled para o atributo class 
dos elementos ul e ol. Definir esse valor de classe tern o efeito semelhante ao de 
se declarar list-style: none; nas CSS, ou seja, retira os marcadores das listas. 

O Bootstrap preve o valor list-inline para o atributo classe dos elementos ul e ol 
que marcam as listas de ordenadas e nao ordenadas. Definir esse valor de classe 
tern o efeito de alinhar horizontalmente os itens da lista. 
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O Bootstrap preve tambem o valor dl-horizontal para o atributo class dos ele- 
mentos dl que marcam as listas de definigao. Definir esse valor de classe tem o 
efeito de alinhar horizontalmente os termos de definigao (dt) com seus termos 
de descrigao (dd). 

Voce pode visualizar os efeitos de estilizagao padrao do Bootstrap para os ele- 
mentos de listas e para o uso dos valores unistyled e dl-horizontal para o atributo 
class consultando o arquivo mostrado a seguir. 

• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-nd-4"> 

<h3>Lista nao ordenada</h3> 

<ul> 

<li>Abacaxi</li> 

<li>Laranja 

<ul> 

<li>Lima</li> 

<li>Bahia</li> 

</ul> 

</li> 

<li>Maga</li> 

</ul> 

</div> 

<div class="col-nd-4"> 

<h3>Lista ordenada</h3> 

<ol> 

<li>Abacaxi</li> 

<li>Laranja 

<ul> 

<li>Lima</li> 

<li>Bahia</li> 

</ul> 

</li> 

<li>Maga</li> 

</ol> 

</div> 

<div class="col-nd-4"> 

<h3>Lista sen narcadores</h3> 
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<ul class="list-unstyled"> 

<li>Abacaxi</li> 

<li>Laranja 

<ul> 

<li>Lima</li> 

<li>Bahia</li> 

</ul> 

</li> 

<li>Maga</li> 

</ul> 

</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-12"> 

<h3>Lista nao ordenada inline</h3> 

<ul class="list-inline"> 

<li>Abacaxi</li> 

<li>Laranja</li> 

<li>Lima</li> 

<li>Bahia</li> 

<li>Ma?a</li> 

</ul> 

</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-6"> 

<h3>Lista de definigao padrao</h3> 

<dl> 

<dt>Abacaxi</dt> 

<dd>Ananas ou abacaxi...</dd> 
<dt>Laranja</dt> 

<dd>A laranja e o fruto...</dd> 
<dt>Maga</dt> 

<dd>A na?a e o fruto pomaceo...</dd> 

</dl> 

</div> 

<div class="col-nd-6"> 

<h3>Lista de definigao horizontal</h3> 

<dl class="dl-horizontal"> 
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<dt>Abacaxi</dt> 

<dd>Ananas ou abacaxi e una...</dd> 

<dt>Laranja</dt> 

<dd>A laranja e o fruto produzido...</dd> 

<dt>Maga</dt> 

<dd>A maga e o fruto ponaceo...</dd> 

</dl> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.container --> 

[.../c3/estilizacao-de-listas.html] 

A renderizagao do arquivo anterior e conforme mostrado na figura 3.8. Observe 
o efeito da estilizagao padrao do Bootstrap para os elementos de lista e para o 
atributo classe com os valores list-unstyled e dl-horizontal. 


Lista nao ordenada 

Lista ordenada 


Lista sem marcadores 

• Abacaxi 

1 Abacaxi 


Abacaxi 

• Laranja 

2. Laranja 


Laranja 

o Lima 

<* Lima 


© Lima 

o Bahia 

o Bahia 


o Bahia 

• Maga 

Lista nao ordenada inline 

3. Maga 


Maga 

Abacaxi Laranja Lima Bahia Maga 

Lista de definigao padrao 


Lista de definigao horizontal 

Abacaxi 


Abacaxi 

Ananas ou abacaxi e uma planta monocotiledonea da 

Ananas ou abacaxi e uma planta monocotiledonea da familia das bromeliaceas. 


familia das bromeliaceas, subfamilia Bromelioideae. 

subfamilia Bromelioideae. 

Laranja 


Laranja 

A laranja e o fruto produzido pela laranjeira (Citrus x 
sinensis), uma arvore da familia Rutaceae. 

A laranja e o fruto produzido pela laranjeira (Citrus x sinensis), uma arvore da familia 
Rutaceae. 

Maga 

A maga e o fruto pomaceo da macieira, arvore da familia Rosaceae. 

Maga 

A maga e o fruto pomaceo da macieira. arvore da familia 
Rosaceae. 


Figura 3.8 - Estilizagao de listas. 


3.3 Codigos 

Os elementos code, kbd, var, sanp e pre destinados a marcar codigos em linha e em 
nivel de blocos respectivamente receberam estilizagao padrao do Bootstrap ca- 
bendo destacar o valor pre-scrollable para o atributo class do elemento pre. Definir 
esse valor de classe tern o efeito de limitar a altura total do bloco de codigo a 
350px provocando o aparecimento de barra de rolagem vertical quando a altura 
do bloco de codigo for maior que os 350px. 
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• O elemento kbd destina-se a marcar entrada do usuario, por exemplo teclas 
ou comandos de voz. 

• O elemento var destina-se a marcar variaveis tanto em expressoes matema- 
ticas como variaveis de programas e scripts. 

• O elemento sanp destina-se a marcar saidas ou resultados de programas. 

• O elemento code destina-se a marcar blocos de codigo. 

• O elemento pre destina-se a marcar textos pre formatados. 

Voce pode visualizar os efeitos de estilizagao padrao do Bootstrap para os elemen- 
tos de marcagao de codigos e para o uso do valor pre-scrollable para o atributo 
classe consultando o arquivo mostrado a seguir. 

• HTML 

<div class="contalner"> 

<div class="row"> 

<div class="col-nd-3"> 

<h3>Elenento &lt;code&gt;</h3> 

<p>0s elenentos <code>&lt;div&gt;</code> e <code>&lt;span&gt; 

</code>nao ten valor senantico.</p> 

</div> 

<div class="col-nd-3"> 

<h3>Elenento &lt;kbd&gt;</h3> 

<p>Para aunentar pressione <kbd>Ctr +</kbd></p> 

</div> 

<div class="col-nd-3"> 

<h3>Elenento &lt;var&gt;</h3> 

<p>A equagao da reta e <var>y</var> = a<var>x</var> + b</p> 

</div> 

<div class="col-nd-3"> 

<h3>Elenento &lt; sarop&gt;</h3> 

<p>0s retorno do script fol <sanp>true</sanp></p> 

</div> 

</dlv> <!-- /.row --> 

<hr> 

<div class="row"> 

<div class="col-nd-6"> 

<h3>Elenento &lt;pre&gt;</code></h3> 

<pre> 

&lt;!DOCTYPE htnl> 
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&lt;html lang="pt-br"> 
&lt;head> 
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</pre> 

</dxv> 

<div class="col-nd-6"> 

<h3>Elenento &lt;pre class="pre-scrollable"&gt;</code></h3> 
<pre class="pre-scrollable"> 

&lt;!DOCTYPE htnl> 

&lt;html lang="pt-br"> 

&lt;head> 


</pre> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.container --> 

[.../c3/estilizacao-de-elementos-para-codigo.html] 

A renderizagao do arquivo anterior e conforme mostrado na figura 3.9. 


Elemento <code> Elemento <kbd> 

Os elementos <div> e Para aumentar pressione 

<span> nao tem valor semantico. 

Elemento <pre> 

Elemento <var> Elemento <samp> 

A equacao da reta e y = ax + b Os retorno do script foi true 

Elemento <pre class="pre-scrollable"> 

<! DOCTYPE htral> 

<! DOCTYPE htral> 

<html lang= ,, pt-br”> 

<html lang=”pt-br"> 

<head> 

<head> 

<meta charset="utf-8"> 

<meta charset="utf-8"> 

<title>Livro Bootstrap Maujor</title> 

<title>Livro Bootstrap Maujor</title> 

<link href=”../bootstrap/css/bootstrap.min.css” rel=”style 

<link href=”../bootstrap/css/bootstrap.min.css” rel=”sty 

sheet” > 

lesheet"> 

</head> 

</head> 

<body> 

<body> 

<div class=”container"> 

<div class=”container”> 

<div class="row"> 

<div class="row”> 

<div class=”col-xs-5"> 

<div class="col-xs-5”> 

<h3>Ele*ento <code></h3> 

<h3>Elemento <codex/h3> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 


<p> ... </p> 


<p> ... </p> 


<p> ... </p> 


</div> 



Figura 3.9 - Estilizagao de elementos para marcar codigo. 
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Observe o efeito da estilizagao padrao do Bootstrap para os elementos para marcar 
codigos e para o atributo classe com o valor pre-scrollable. Notar que a estilizagao 
padrao preve um fundo cinza e uma borda arredondada para ambos os elementos. 


3.4 Tabelas 

As funcionalidades do Bootstrap para estilizagao de tabelas baseiam-se em valores 

do atributo class a serem declarados no elemento table conforme descritos a seguir. 

• table - Estilizagao basica da tabela compreendendo declaragao de padding 
para as celulas e bordas horizontais entre linhas. Uso: stable class="table">. 

• table table-striped - Estilizagao basica mais efeito zebra nas linhas. Usa o 
seletor nth-child e por isso nao funciona nos IE8 e anteriores. Uso: stable 
class="table table-striped">. 

• table table-bordered - Estiliza a tabela com a declaragao de padding para as 
celulas e bordas. Uso: stable class="table table-bordered">. 

• table table - hover -Estilizagao basica da tabela e efeito over nas linhas dentro 
de tbody. Uso: stable class="table table-hover">. 

• table table-condensed - Estilizagao basica da tabela com linhas de altura 
reduzida. Uso: stable class="table table-condensed">. 

Sao previstos ainda, valores do atributo class a serem declarados no elemento tr. 

Os valores (nomes) dessas classes e suas finalidades sao listados a seguir. 

• active - Estiliza a linha da tabela na cor azul cinza claro e indica uma linha 
com status de ativa. Uso: str class="active">. 

• success - Estiliza a linha da tabela na cor verde clara e indica uma linha com 
status de agao bem sucedida. Uso: str class="success">. 

• info - Estiliza a linha da tabela na cor azul clara e indica uma linha com 
status informativo. Uso: <tr class="info">. 

• warning - Estiliza a linha da tabela na cor laranja clara e indica uma linha 
com status de alerta. Uso: <tr class="warning">. 

• danger - Estiliza a linha da tabela na cor salmon clara e indica uma linha 
com status de perigo. Uso: <tr class="danger">. 
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Para demonstrar o uso e efeitos das classes de estilizagao de tabelas conforme 
descritas anteriormente usaremos nos exemplos que seguem a marcagao de uma 
tabela conforme mostrada a seguir. 

• HTML 

<table> 

<caption>Estoque de frutas</caption> 

<thead> 

<tr> 

<th scope="col">No.</th> 

<th scope="col">Fruta</th> 

<th scope="col">Estoque<br>(kg)</th> 

<th scope="col">Preqo/caixa<br>(R$)</th> 

</tr> 

</thead> 

<tfoot> 

<tr><td colspan="4">Valores finals para o mes de feverelro/2012</td></tr> 

</tfoot> 

<tbody> 

<tr> 

<td>l</td> 

<td>Abacaxi</td> 

<td>270</td> 

<td>125,90</td> 

</tr> 

<!-- mais tres linhas de frutas --> 

</tbody> 

</table> 


3.4.1 Estilizagao basica 

• HTML 

<table class="table"> 

<!-- marcagao da tabela --> 
</table> 

[.../c3/estilizacao-basica-de-tabela.html] 
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Este exemplo de estilizagao de tabela encontra-se dispomvel para consulta online 
ou download e consulta local. 

Observe na figura 3.10 a renderizagao da tabela basica. 


Tabela basica 

<table class="table"> 
Estoque de frutas 


No. 

Fruta 

Estoque 

(Kg) 

Pre$o/caixa 

(R*) 

1 

Abacaxi 

270 

125,90 

2 

Laranja 

460 

156,75 

3 

Maca 

150 

98,20 

4 

Pera 

190 

74,40 


Valores flnais para o mes de fevereiro/2012 

Figura 3.10 - Estilizagao de tabela basica. 


3.4.2 Estilizagao com efeito zebra 

• HTML 

<table class="table table-striped"> 

<!-- oarcagao da tabela --> 

</table> 

[.../c3/estilizacao-de-tabela-efeito-zebra.html] 

Este exemplo de estilizagao de tabela encontra-se dispomvel, para consulta online 
ou download e consulta local. 

Observe na figura 3.11 a renderizagao da tabela com efeito zebra. 

Para obter o efeito zebra o Bootstrap usa como seletor a pseudo-classe : nth- child() 
que nao e suportada pelo Internet Explorer 8. 
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Tabela com efeito zebra 

<table class="table table-striped”> 
Estoque de frutas 




Estoque 

Prepo/caixa 

No. 

Fruta 

(kg) 

(R$) 

1 

Abacaxi 

270 

125,90 

2 

Laranja 

460 

156,75 

3 

Mapa 

150 

98,20 

4 

Pera 

190 

74,40 


Valores finals para o mes de fevereiro/2012 

Figura 3.11 - Estilizagao de tabela com efeito zebra. 


3.4.3 Estilizagao com classes de contexto 

Em tabelas as classes de contexto se destinam a estilizar as linhas da tabela com 
cores indicativas de um estado. Estas classes devem ser definidas para o elemento 
tr. As classes de contexto para tabelas e seus nomes e cores sao: active (cor do 
tema), success (cor verde), info (cor azul), warning (coramarela) e danger (corsalmao). 

• HTML 

<table ciass=''tabie"> 

<tr class="succes">. ..</tr> 

<!-- narcagao da tabeia --> 

</tabie> 

[.../c3/estilizacao-de-tabela-com-classes-de-contexto.html] 

Este exemplo de estilizagao de tabela encontra-se disponlvel, no site do livro, para 
consulta online ou download e consulta local. 
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<table class="table table-bordered"> 

<!-- narcagao da tabela --> 

</table> 

[.../c3/estilizacao-de-tabela-com-bordas.html] 

Este exemplo de estilizagao de tabela encontra-se disponlvel, no site do livro, para 
consulta online ou download e consulta local. 

Observe na figura 3.12 a renderizagao da tabela com bordas. 


Tabela com bordas 

ctable class="table table-bordered"> 

Estoque de frutas 



Estoque 

Prepo/caixa 

No. 

Fnita 

(kg) 

(RS) 

1 

Abacaxi 

270 

125,90 

2 

Laranja 

460 

156,75 

3 

Ma?a 

150 

98,20 

4 

Pera 

190 

74,40 


Valores finals para o mes de fevereiro/2012 


Figura 3.12 - Estilizagao de tabela com bordas. 


3.4.5 Estilizagao com efeito hover nas linhas 

• HTML 

<table class="table table-hover"> 

<!-- narcagao da tabela --> 

</table> 

[.../c3/estilizacao-de-tabela-efeito-hover.html] 
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Este exemplo de estilizagao de tabela encontra-se disponivel, no site do livro, para 
consulta online ou download e consulta local. 

Observe na figura 3.13 a renderizagao da tabela com efeito hover nas linhas (o 
mouse esta sobre a segunda linha). 


Tabela com efeito hover 

<table class="table table hover"> 

Estoque de frutas 


No. 

Fruta 

Estoque 

(Kg) 


Prego/caixa 

(R*) 

1 

Abacaxi 

270 


125.90 

2 

Laranja 

460 


156,75 

3 

Maga 

150 


98,20 

4 

Pera 

190 


74,40 


Valores finais para o mes de fevereiro/2012 

Figura 3.13 - Efeito hover em linhas de tabela. 


3.4.6 Estilizagao com linhas condensadas 

• HTML 

<table class="table table-condensed"> 

<!-- marcagao da tabela --> 

</table> 

[.../c3/estilizacao-de-tabela-condensada.html]] 

Este exemplo de estilizagao de tabela encontra-se disponivel, no site do livro, para 
consulta online ou download e consulta local. 

Observe na figura 3.14 a renderizagao da tabela com linhas condensadas. 
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Tabela basica com efeito condensado 

<table class="table table-condensed"> 

Estoque de frutas 


No. 


Fruta 


Estoque 

(Kg) 


Preqo/caixa 

(RS) 


1 

Abacaxi 

270 

125,90 

2 

Laranja 

460 

156,75 

3 

Maca 

150 

98,20 

4 

Pera 

190 

74,40 

Valores finais para o mes de fevereiro/2012 


Figura 3.14 - Estilizagao de tabela com linhas condensadas. 

Para obter este efeito simplesmente diminuiu-se o valor de padding das linhas. 


3.4.7 Estilizagao responsiva 

Por padrao as tabelas tem urn comportamento igual ao comportamento dos 
demais elementos da marcagao, ou seja, contraem para se adaptar a largura da 
viewport. O Bootstrap preve a classe table-responsive que se destina a eliminar 
o comportamento de contragao da tabela em viewports com largura inferior a 
768px e criar uma barra de rolagem horizontal para a tabela. Notar que a tabela 
recebe um elemento div como container e e esse elemento que recebe a classe 
table-responsive. 

• HTML 

<div class="table-responsive"> 

<table class="table"> 

<!-- narcagao da tabela --> 

</table> 

</div 

[.../c3/estilizacao-de-tabela-responsiva.html] 

Este exemplo de estilizagao de tabela encontra-se disponivel, no site do livro, para 
consulta online ou download e consulta local. 
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Observe na figura 3.15 a renderizagao da tabela com efeito responsivo. 


Tabela com efeito 
responsivo 


<div class-”table responsive">...</div> 

Estoque de frutas 




Estoque 

Prego/caixa 

NO. 

Fruta 

(kg) 

(R$) 

1 

Abacaxi 

270 

125,90 

2 

Laranja 

460 

156,75 

3 

Maga 

150 

98,20 

4 

Pera 

190 

74,40 


Valores finais para o mes de fevereiro/201 

< i I ► 


Figura 3.15 - Estilizagao de tabela responsiva. 


3.5 Formularios 

As funcionalidades do Bootstrap para estilizagao de formularios baseiam-se em 
valores do atributo classe a serem declarados nos elementos de formulario e cujos 
seletores CSS e respectivas finalidades estudaremos a seguir. 


3.5.1 Estilizagao de controles 

O Bootstrap preve varias classes a serem aplicadas nos diferentes controles de for¬ 
mularios possibilitando uma estilizagao padrao. Nesse item veremos como aplicar 
as classes de estilizagao de controles e mostraremos os efeitos dessa estilizagao. 

3.5.1.1 Estilizagao de input e textarea 

Os controles input tipo text e textarea recebem uma estilizagao padrao sem neces- 
sidade de declarar uma classe. A estilizagao consiste na aplicagao de uma borda 
cinza com cantos arredondados. Ao ser dado o foco ao controle a borda assume 
a cor azul com um efeito de sombra em volta, tambem na cor azul. 
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Alerta: Os navegadores Internet Explorer versfies anteriores ao IE9 nao suportam 
bordas arredondadas nem o efeito de sombra para o foco, contudo nenhuma 
funcionalidade do controle se perde para aqueles navegadores, sendo que o foco 
no controle causa outline pontilhada. 


A marcaqao HTML minima para mostrar a renderizaqao estilizada desses controles 
e conforme a seguir. 

• HTML 

<input type="text" placeholder=''Nopie"> 

<textarea rows="5'' placeholder="Sua nensagen aqui"x/textarea> 

Na figura 3.16 mostramos a renderizaqao padrao e o efeito ao ser dado o foco no 
controle. 


Repouso 


Foco 


Nome 

Sua mensagem aqui 



Figura 3.16 - Estilizagao de caixas de texto. 


3.5.1.2 Estiliza^ao de botoes 

O Bootstrap preve classes para estilizar botoes. Essas classes destinam-se a defi- 
nir cores e dimensoes dos botoes. Teoricamente as classes podem ser aplicadas 
a qualquer elemento HTML da marcaqao, contudo a sua fmalidade principal e 
para estilizaqao dos elementos HTML para marcar ancoras a e botoes, mais espe- 
cificamente os elementos button e os elementos input dos tipos button, subnit e reset. 

Esta prevista a classe btn que serve de seletor para regras CSS que estilizam o 
botao sem bordas, cor de fundo cinza e cantos arredondados. 

Deve-se usar a classe btn-* em conjunto com a classe btn para completar a estili- 
zaqao do botao conforme descrito adiante. 
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O Bootstrap preve oito classes para estilizar botoes de forma geral. Os nomes 
dessas classes e suas fmalidades sao listadas a seguir. 

• btn - Destina-se a estilizaqao padrao de um botao. Estiliza o botao sem 
bordas, cor de fundo cinza e cantos arredondados. 

• btn-default - Botao com fundo na cor branca e borda cinza arredondada. 

• btn-prinary - Botao com fundo na cor azul escura e borda arredondada. 

• btn-success - Botao com fundo na cor verde clara e borda arredondada. 

• btn-info - Botao com fundo na cor azul clara e borda arredondada. 

• btn-warning - Botao com fundo na cor laranja clara e borda arredondada. 

• btn-danger - Botao com fundo na cor salmao clara e borda arredondada. 

• btn-link-Esta classe se destina a ser aplicada (em conjunto com a classe btn) 
exclusivamente aos botoes marcados com o elemento button. Ela transforma 
o botao padrao marcado com aquele elemento em um link padrao (como 
se fosse marcado com o elemento a). 

Ao ser dado o foco a qualquer um dos botoes o fundo assume uma cor mais escura. 

Embora o elemento a destinado a marcar ancoras em geral, nao seja um controle 
de formulario, pode ser estilizado como um botao com uso destas classes. 


Alerta: Os navegadores Internet Explorer versoes anteriores ao IE9 nao suportam 
bordas arredondadas nem o efeito degrade que, nesses casos, se transforma em 
uma cor cinza solida, contudo nenhuma funcionalidade dos botbes se perde 
para aqueles navegadores. 


A marcaqao HTML minima para mostrar a renderizagao estilizada de alguns 
botoes e conforme a seguir. 


• HTML 


<button type="button 
<button type="button 
<input type="subnit" 
<input type="button" 


" class="btn btn-primary">button primary</button> 

" class="btn btn-default">button default</button> 
class="btn btn-success" value="input-subnit success"> 
class="btn btn-warning" value="input-button warning"> 


<a href="#" class="btn btn-dange 

<button type="button" class="btn btn-link">button link</button> 


[.../c3/estilizacao-de-botoes.html] 
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Ao usar um elemento a para criar um botao nao esquega de marcar o atributo e 
seu valor role="button". 

Na figura 3.17 mostramos a renderizagao dos botoes conforme a marcagao anterior. 



Figura 3.17 - Estilizagao de botoes. 

Por padrao, os botoes sao estilizados com um padding que determina suas di- 
mensdes. As classes . bt-lg, .btn-sn e .btn-xs possibilitam que se altere aquele valor 
padrao de padding e se obtenha botoes com dimensoes maiores, menores e muito 
menores que o botao padrao respectivamente. 

A marcagao HTML para criar tais botoes e conforme a seguir. 

• HTML 

<button type="button" class="btn btn-active btn-lg">botao maior</button> 

<button type="button" class="btn btn-active">botao padrao</button> 

<button type="button" class="btn btn-active btn-sni">e="button" 
class="btn btn-active btn-xs">botao nuito nenor</button> 

[.../c3/dimensoes-de-botoes.html] 

Na figura 3.18 mostramos a renderizagao dos botoes conforme a marcagao anterior. 



botao maior 

botao padrao 

botao menor 

botao muito menor 





Figura 3.18 - Dimensoes de botoes. 

Por padrao os botoes sao elementos do tipo inline. A classe btn-block faz com que os 
botoes se comportem como elementos nivel de bloco e se expandam em largura 
por toda a largura do elemento que os content. 

Use a classe active para estilizar um botao tal como quando ele recebe o foco (cor 
de fundo mais escura). 

Para desabilitar um botao use o atributo disabled. Botoes desabilitados sao estili¬ 
zados com uma cor de fundo mais clara. 

A marcagao HTML para criar aplicar estas classes aos botoes e conforme a seguir. 
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HTML 

<div class=''container"> 

<div class="row"> 

<div class="col-md-6"> 

<button type="button" 

<button type="button" 

<button type="button" 

</div> 

<div class="col-nd-6"> 

<button type="button' 

<button type="button' 

<button type="button' 

</div> 

</dtv> <!-- /.row--> 

<hr> 

<div class="row"> 

<div class="col-nd-6"> 

<button type="button' 

<button type="button" 

<button type="button' 

</div> 

</dlv> <!-- /.row --> 

</div> <!-- /.container --> 

[.../c3/outras-dasses-para-botoes.html] 


class="btn btn-info btn-block">botao ntvel de bloco</button> 
class="btn btn-success btn-block">botao ntvel de bloco</button> 
class="btn btn-danger btn-block">botao ntvel de bloco</button> 


class="btn btn-tnfo acttve">botao estado attvo</button> 
class="btn btn-success active">botao estado attvo</button> 
class="btn btn-danger active">botao estado attvo</button> 


class="btn btn-tnfo dtsabled">botao desabtlttado</button> 
class="btn btn-success dtsabled">botao desabtlttado</button> 
class="btn btn-dan</button> 


3.5.1.3 Estiliza^ao de checkbox 

Para os controles Input tipo checkbox esta prevista a classe checkbox que serve de seletor 
para regras CSS destinadas basicamente a definir padding, margin e alinhamentos 
com o objetivo de obter uma renderizagao crossbrowser para esses controles. 

A marcagao HTML para cada checkbox e seu rotulo devera estar contida dentro 
de um elemento div que recebe a classe checkbox conforme mostrado a seguir. 

• HTML 

<div class="checkbox"> 

<label><input type="checkbox">Opgaol</label> 

</div> 

<div class="checkbox"> 


Conhega os livros do Maujor: http://livrosdomaujor.com.br 


Capi'tulo 3 ■ CSS 


91 


<label><input type="checkbox">Opgao2</label> 

</div> 

<div class="checkbox"> 

<label><input type="checkbox">Opgao3</label> 

</div> 

Os controles sao renderizados na vertical. Opcionalmente voce podera usar a classe 
checkbox-inline a ser declarada para o elemento label, que provoca a renderizagao 
na horizontal conforme mostrado a seguir. 

• HTML 

<label class="checkbox-inline"><input type="checkbox">Op?aol</label> 

<label class="checkbox-inUne"><input type="checkbox">0pgao2</label> 

<label class="checkbox-inline"><input type="checkbox">0pgao3</label> 

E possivel estilizar os campos checkbox em formato de botoes conforme mostrado 
na marcagao HTML a seguir. 

• HTML 

<div class="btn-group" data-toggle="buttons"> 

<label class="btn btn-prinary active"> 

<input type="checkbox'' autoconplete="off" checked>Opgao 1 (narcado) 

</label> 

<label class="btn btn-prinary"> 

<input type="checkbox" autoconplete="off">Opgao 2 
</labey"> 

<input type=''checkbox" autoconplete=''off">Opgao 3 
</label> 

</div> 

[.../c3/estilizacao-de-checkbox.html] 

Na figura 3.19 mostramos a renderizagao dos controles na vertical e na horizontal 
e tambem a estilizagao dos checkboxes em formato de botao, conforme as mar- 
cagoes anteriores. 


Checkbox na vertical Checkbox na horizontal Checkbox com botoes 

Q OpCcI 0 1 Q Oppao 1 O Oppfio? Q Opc.io3 

□ Opcao2 

□ Opfao3 


Figura 3.19 - Checkbox na vertical, horizontal e botoes. 


Opcao 1 (marcado) Opcao 2 Opcao 3 
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3.5.1.4 Estiliza^ao de botao radio 

A marcagao HTML para cada botao radio e seu rotulo devera estar contida dentro 
de um elemento div que recebe a classe radio conforme mostrado a seguir. 

• HTML 

<div class="radio"> 

<label><input type="radio" nane="opcoesl">Opgaol</label> 

</div> 

<div class="radio"> 

<label><input type="radio" nane="opcoesl">0pgao2</label> 

</div> 

<div class="radio"> 

<label><input type="radio" nane="opcoesl">0pgao3</label> 

</div> 

Os controles sao renderizados na vertical. Opcionalmente voce podera usar a classe 
radio-inline a ser declarada para o elemento label, que provoca a renderizagao na 
horizontal conforme mostrado a seguir. 

• HTML 

<label class="radio-inline"><input type="radio" nane="opcoes2">0pgaol</label> 

<label class="radio-inline"><input type="radio" nane="opcoes2">0pgao2</label> 

<label class="radio-inline"xinput type="radio" nane="opcoes2">0p;ao3</label> 

E possivel estilizar os campos tipo radio em formato de botoes conforme mostrado 
na marcagao HTML a seguir. 

<div class="btn-group" data-toggle="buttons"> 

<label class="btn btn-prinary"> 

<input type="radio" nane="opcao" id="opcaol" autoconplete="off">Radio 1 
</label> 

<label class="btn btn-primary"> 

<input type="radio" nane="opcao" id="opcao2" autoconplete="off">Radio 2 
</label> 

<label class="btadio" nane="opcao" id="opcao3" autoconplete="off">Radio 3 
</label> 

</div> 

[.../c3/estilizagao-de-botao-radio.html] 
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Na figura 3.20 mostramos a renderizagao dos controles na vertical e na horizontal 
e tambem a estilizagao dos campos tipo radio em formato de botao, conforme as 
marcagoes anteriores. 

Botao radio na vertical Botao radio na horizontal Botao radio com botoes 

O Opcaol O Oppaol O Opcao2 0 Opcao3 

O Opcao2 
O Oppao3 

Figura 3.20 - Botao radio na vertical, na horizontal e botoes. 


Radio 1 Radio 2 Radio 3 


3.5.1.5 Estilizagao deselect 

Os controles do tipo selegao devem ser marcados com a classe form-control para 
recebem uma estilizagao padrao que consiste simplesmente na aplicagao de uma 
borda cinza com cantos arredondados. Alargura deste elemento e igual a largura 
do seu container. 


Alerta: Os navegadores Internet Explorer versoes anteriores ao IE9 nao suportam 
bordas arredondadas. 


A estilizagao da borda e aplicada mesmo quando se declara o atributo multiple 
para o elemento select. A marcagao HTML minima para mostrar a renderizagao 
estilizada desses controles e conforme a seguir 

• HTML 

<select class="form-control"> 

<option>Escolha uma das opgoes</option> 

<option>0p?aol</option> 

<option>0p?ao 2</option> 

</select> 

<select class="form-control" multiple> 

/option> 

<option>0p?ao l</option> 

<option>0p?ao 2</option> 

</select> 

[.../c3/estilizacao-de-select.html] 
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Na figura 3.21 mostramos a renderizagao dos controles com e sem a definigao do 
atributo multiple conforme a marcagao anterior. 


Escolha uma das opgoes 

▼ Escolha uma das opgoes 

■ 


Opgao 1 



Opgao 2 

m 


Opgao 3 



l- A - 



Figura 3.21 - Controle de selegao. 


3.5.1.6Texto de ajuda em controles 

O Boostrap preve a classe help-block que se destina a posicionar os textos de ajuda 
para preenchimento ou mensagens de validagao de controles. 

O exemplo mostrado a seguir esclarece a definigao desta classe para criar textos 
de ajuda em dois campos. 

• HTML 

<input type="text" class="form-control" placeholder="Seu CPF" aria- 
describedby="helpBlockl"> 

<span id="helpBlockl" class="help-block">somente numeros</span> 

<input type="text" class="form-control" placeholder="y="helpBlock2"> 

<span id="helpBlock2" class="help-block">dd/nin/yyyy</span> 

[.../c3/estilizacao-texto-de-ajuda.html] 


3.5.2 Estilizagao de formulario 

O Bootstrap preve uma estilizagao padrao para formularios, bastando que se 
marque um div container com a classe form-group para cada conjunto de controles 
do formulario. 

Esta prevista a classe form-inline a ser declarada para o elemento form e cuja fina- 
lidade e estilizar o formulario em linha. 

3.5.2.1 Estilizagao padrao e em linha 

O codigo mostrado a seguir e a marcagao HTML para um formulario simples e 
sera usado para mostrar as estilizagoes padrao e em linha aplicada pela folha de 
estilos do Bootstrap. 
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<fom> 

<div class="fom-group"> 

<label for="enail">Enail</label> 

<input type="email" class="fom-control" id="email" placeholder="Entre seu enail"> 

</div> 

<div class="fom-group"> 

<label for="senha">Senha</label> 

<input type="password" class="fom-control" id="senha" placeholder="Senha"> 

</div> 

<div class="fom-group"> 

<div class="checkbox"> 

<label>Escol.ha as cores 

</div> 

<button type="subm.t" class="btn btn- 

<forn class="forpi-inUne"> 

<--! igual ao fomularxo anterior --> 

</form> 

[.../c3/estilizacao-padrao-e-em-linha-de-formulario.html] 

Na figura 3.22 mostramos a renderizagao padrao e em linha para o formulario, 
conforme a marcagao anterior. 

Email 

Entre seu email 

Senha 

Senha 

Escolha as cores 

□ Azul 

□ Verde 

□ Vermelha 

Enviar 


Email Entre seu email Senha Senha Escolha as cores UAzul Overde UVermelha Enviar 


Figura 3.22 - Formulario com estilizagao padrao e em linha. 
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3.6 Imagens 

O Bootstrap preve a aplicagao de tres efeitos simples em imagens inseridas com 
uso de marcagao HTML. Os efeitos sao aplicados quando se define os valores do 
atributo classe para o elemento ing conforme listados a seguir. 

• ing-rounded - Aplica na imagem cantos arredondados usando raio igual a 
6px. 

• ing- circle -Aplica na imagem cantos arredondados usando raio igual a 50%. 
A imagem e renderizada como um circulo ou uma elipse, dependendo do 
seu aspect-ratio. 

• ing-thunbnail - Aplica na imagem um padding de 4px e uma borda de lpx na 
cor cinza. 

No Bootstrap, por padrao, as imagens nao sao responsivas, assim, para fazer a 
imagem responsiva use a classe ing-responsive. 

Se voce pretende que todas as imagens da sua aplicagao sejam responsivas, por 
padrao, crie a seguinte regra CSS. 

• HTML 

ing { 

display: block; 
nuto; 

} 

Para visualizar a estilizagao das imagens com os tres efeitos aplicados consulte o 
arquivo disponivel no site do livro conforme marcagao HTML tipica, mostrada 
a seguir. 

• HTML 

<img class="inig-responsive ing-circle" src="inagen.jpg" alt="dinossauro"> 

<img class="inig-responsive inig-rounsauro"> 

<ing class="ing-responsive ipig-thumbnail" src="inagen.jpg" alt="dinossauro"> 

[.../c3/estilizacao-de-imagem.html] 

Na figura 3.23 mostramos o efeito em imagens resultantes da definigao dessas 
classes, conforme marcagao HTML anterior. 
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Figura 3.23- Estilizagao de imagem. 


3.7 Classes auxiliares 

O Bootstrap preve uma serie de classes denominadas de helper classes que se desti- 
nam a destacar, centrar, flutuar, esconder, textos e componentes bem como destacar 
fundos, inserir marcas visuais fornecer dicas para leitores de tela e navegagao por 
teclado. Veremos, a seguir, a aplicagao e efeitos de tais classes. 


3.7.1 Cores contextuais 

Para estilizar textos com uma cor estao disponlveis as seguintes classes. 

• text-muted - Estiliza textos na cor #777. 

• text-primary - Estiliza textos na cor #337ab7. 

• text-success - Estiliza textos na cor #3c763d. 

• text-info - Estiliza textos na cor #31708f. 

• text-warning - Estiliza textos tiliza textos na cor #a94442. 

Para visualizar a estilizagao de textos com estas cores consulte o arquivodisponivel 
no site do livro conforme marcagao HTML tipica, mostrada a seguir. 

• HTML 

<p class="text-niuted">Este e um texto estilizado com a classe <code>muted 
</code></p> 

<p class="text-pripiary">Este e um texto estilizado com a classe <code>text-primary 
</code></p> 
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<p class="text-success">Este e un texto estilizado con a classe <code>text-success 
</code></p> 

<p class="text-info">Este e un texto estilizado con a classe <code>text-info 
</code></p> 

<p class="text-warning">Este e un texto estilizado con a classe <code>text-warning 
</code></p> 

<p class="text-danger">Este e un texto estilizado con a classe <code>text-danger 
</code></p> 

[.../c3/estilizacao-de-textos-com-cores.html] 


3.7.2 Fundos contextuais 

Para estilizar o fundo de um box com uma cor estao dispomveis as seguintes classes. 

• bg-prinary - Estiliza textos na cor #337ab7. 

• bg-success - Estiliza textos na cor #dff0d8. 

• bg-info - Estiliza textos na cor #d9edf7. 

• bg-warning - Estiliza textos na cor #fcf8e3. 

• bg-danger - Estiliza textos na cor #f2dede. 

Para visualizar a estilizagao de fundo de boxes com estas cores consulte o arquivo 

disponivel no site do livro conforme marcagao HTML tipica, mostrada a seguir. 

• HTML 

<p class="bg-nuted">Este e un box con cor de fundo estilizada con a classe <code>nuted 
</codex/p> 

<p class="bg-prinary">Este e un box con cor de fundo estilizada con a classe <code> 
bg - prina ry</code></p> 

<p class="bg-success">Este e un box con cor de fundo estilizada con a classe 
<code>bg-success</code></p> 

<p class="bg-info">Este e un box con cor de fundo estilizada con a classe <code>bg-info 
</codex/p> 

<p class="bg-warning">Este e un box con cor de fundo estilizada con a classe 
<code>bg-warning</code></p> 

<p class="bg-danger">Este e un box con cor de fundo estilizada con a classe 
<code>bg-danger</code></p> 

[.../c3/estilizacao-de-fundos-com-cores.html] 
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3.7.3 Marcadores fechar e dropdown 

Para criar um marcador X (xis) que indica fechamento de uma janela usa-se a 
classe close em um elemento button combinado com um elemento span para mar- 
car o xis. Para criar um marcador tipo pequeno triangulo apontando para baixo, 
destinado a indicar abertura de um e caret em um elemento span. 

Para visualizar a estilizagao e criagao destes dois marcadores consulte o arquivo 
disponivel no site do livro conforme marcagao HTML tipica, mostrada a seguir. 
Notar que por padrao a marca para fechar e posicionada no canto superior a 
direita do container. 

• HTML 

<button type="button" class="close" aria -label="Close"><span aria -hidden="true">&times; 
</spanx/button> 

<span class="caret"></span> 

[.../c3/estilizacao-de-marcadores.html] 


3.7.4 Flutuar 

Para flutuar elemento as classes .pull-left e .pull- right respectivamente. 

Para visualizar o efeito destas classes consulte o arquivo conforme marcagao 
HTML tipica, mostrada a seguir. 

• HTML 

<p class="pull-left">Paragrafo a esquerda</p> 

<p class="pull-right">Paragrafo a direita</p> 

[.../c3/estilizacao-com-float.html] 

Alerta: Estas classes nao devem ser usadas em barras de navegagao. Conforme 
veremos no capitulo 4, para barras de navegagao existem as classes navbar-left e 
navbar-right. 


3.7.5 Clearfix a classe clearfix 

Para "clarear floats" use a classe clearfix no container dos elementos flutuados. 
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Para visualizar o efeito destas classes consulte o arquivo conforme marcagao 
HTML tlpica, mostrada a seguir. 

• HTML 

<div class="clearfix"> 

<p class="p u L-left">Paragrafo a esquerda</p> 

<p class="p u L-right">Paragrafo a direita</p> 

</div> 

[.../c3/estilizacao-com-dearfix.html] 


3.7.6 Centrar na horizontal 

Para centrar na horizontal use a classe center-block. 

Para visualizar o efeito desta classe consulte o arquivo conforme marcagao HTML 
tipica, mostrada a seguir. 

• HTML 

<p class="center-block 1 ' style="width:50%"> 

Loren ipsun... 

</div> 

[.../c3/estilizacao-para-centrar.html] 


3.7.7 Mostrare esconder 

Para revelar e esconder conteudos, inclusive para leitores de tela, use as classes .show 
e .hidden respectivamente. 


3.7.8 Leitores de tela e navegagao por tedado 

Para esconder conteudos exceto para leitores de tela use a classe sr-only. Os conteudos 
escondidos com esta classe devem ser revelados obrigatoriamente para usuarios 
que navegam com uso do teclado. Para isso existe a classe sr-only-focusable deve 
ser usada em conjunto com .sr-only. 
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3.7.9 Image replacement 

Esconder um texto dentro de um elemento e substitui-lo por imagem e uma 
tecnica conhecida como image replacement. Nestes casos, para esconder o texto 
use a classe text-hide. 


3.7.10 Mostrar e esconder por breakpoints 

O Bootstrap preve uma serie de classes para controlar a visibilidade de conteu- 
dos de acordo com o breakpoint. E possivel mostrar conteudos em larguras de 
viewport acima de determinada largura e esconde-los abaixo daquela largura e 
vice-versa. 

Convem ressaltar que a opgao pelo uso destas classes deve ser resultante de uma 
cuidadosa analise e conveniencia, pois uma das diretrizes fundamentals do design 
responsivo preconiza que nao se deve esconder conteudos em fungao de larguras 
de telas ou natureza dos dispositivos. 

Nas tabelas 3.1 e 3.2 mostramos a sintaxe destas classes e seus efeitos. 


Tabela 3.1- Classes responsivas sintaxe 



Telefones (<768px) 

Tablets(>=768px) 

Desktop (>=992px) 

Desktop (>=1200px) 

.visible-xs-* 

MOSTRA 

ESCONDE 

ESCONDE 

ESCONDE 

.visible-sm-* 

ESCONDE 

MOSTRA 

ESCONDE 

ESCONDE 

.visible-md-* 

ESCONDE 

ESCONDE 

MOSTRA 

ESCONDE 

.visible-lg-* 

ESCONDE 

ESCONDE 

ESCONDE 

MOSTRA 

.hidden-xs 

ESCONDE 

MOSTRA 

MOSTRA 

MOSTRA 

.hidden-sm 

MOSTRA 

ESCONDE 

MOSTRA 

MOSTRA 

.hidden-md 

MOSTRA 

MOSTRA 

ESCONDE 

MOSTRA 

.hidden-lg 

MOSTRA 

MOSTRA 

MOSTRA 

ESCONDE 


Tabela 3.2- Classes responsivas niveis 


Grupo declasses 

CSS display 

.visible-*-block 

display: block; 

.visible-*-inline 

display: inline; 

.visible-*-inline-block 

display: inline-block; 
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Observe a seguir um exemplos de sintaxe para algumas destas classes. 


• HTML 

<span class="hidden-xs">Esconde en x-small</span> 

<span class="visible-xs-block">Visivel en x-snall</span> 


<span class="hidden-sm">Esconde en snall</span> 

<span class="visible-sn-block">Vislvel en snall</span> 


<span class="hidden-nd">Esconde en nediun</span> 

<span class="visible-nd-block">Visivel en nediun</span> 


<span class="hidden-lg">Esconde en large</span> 

<span class="visible-lg-block">Visivel en large</span> 


[.../c3/estilizacao-mostra-esconde-por-breakpoints.html] 


3.7.11 Classes para impressao 

O Bootstrap preve uma serie de classes para controlar os conteudos a serem 
impressos. 

Na tabela 3.3 mostramos a sintaxe destas classes e seus efeitos. 


Tabela 3.3- Classes para impressao 


Classes 

Navegador 

Impressao 

.visible-print-block 

ESCONDE 

MOSTRA 

.visible-print-inline 

ESCONDE 

MOSTRA 

.visible-print-inline-block 

ESCONDE 

MOSTRA 

.hidden-print 

MOSTRA 

ESCONDE 


3.8 Valida^ao de formularios 

A indicagao do resultado da validagao faz-se com uso de cores e adicionalmente 
com insergao de leones. 
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3.8.1 Validagao com cores 

O Bootstrap preve tres classes para estilizar com cores os rotulos e as bordas dos 
campos do formulario fornecendo ao usuario informagao sobre a validagao dos 
dados entrados no campo. 

Para cumprir criterios de acessibilidade fornega, para as tecnologias assistivas 
e para usuarios impedidos de distinguir cores alternativas a cor conforme pres- 
creve as especificagoes do W3C. Em campos nao validados inclua a declaragao 
aria-invalid="true". 

As classes para estilizar com cores e suas finalidades sao listadas a seguir. 

• has-warning -Estiliza as bordas, o texto do rotulo e textos de ajuda do controle 
na cor #8a6d3b e indica que a validagao do campo resultou em um status de 
alerta. 

• has-error - Estiliza as bordas, o texto do rotulo e textos de ajuda do controle na 
cor #a94442e indica que a validagao do campo resultou em um status de erro. 

• has-success -Estiliza as bordas, o texto do rotulo e textos de ajuda do controle 
na cor #3c763d e indica que a validagao do campo resultou em um status de 
agao bem sucedida. 

Essas classes podem ser definidas para os rotulos dos controle, para os proprios 
controles ou para os containers marcados com a classe help-block. 

Voce pode visualizar os efeitos da definigao dessas classes consultando o arivro, 
mostrado a seguir. 

• HTML 

<div class="forn-group has-success''> 

<label class="control-label" for="sucesso''>Input con sucesso</label> 

<input type="text" class="forn-control" id="sucesso"> 

</div> 

<div class="forn-group has-warning'^ 

<label class="control-label" for="alerta">Input con alerta</label> 

<input type="text" class="forn-control" id="alerta"> 

</div> 

<div class="forn-group has-error"> 

<label class="control-label" for="erro">Input con erro</label> 

<input type="text" class="forn-control" id="erro"> 

</div> 
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<div class="has-success"> 

<div class="checkbox"> 

<label> 

<input type=''checkbox" id="checkboxSucesso" value="opcaol''> 
Checkbox con sucesso 
</label> 

</div> 

</div> 

<div class="has-warning"> 

<div class="checkbox"> 

<label> 

<input type="checkbox" id="checkboxAlerta" value="opcaol"> 

Checkbox con alerta 
</label> 

</div> 

</div> 

<div class="has-error"> 

<div class=''checkbox"> 

<label> 

<input type= "checkbox" id="checkboxErro'' value="opcaol"> 

Checkbox con erro 
</label> 

</div> 

</div> 

[.../c3/estilizacao-estado-de-validacao.html] 


3.8.2 Validagao com icones 

Adicionalmente ao uso de cores em campos validados podemos incluir um icone 
dentro e a direita do campo validado. Neste caso use a classe has-feedback como 
mostrado no exemplo. 

A marcagao tipica e as classes para incluir icones de validagao em campos de 
formulario e mostrada em destaque no exemplo a seguir. 

• HTML 

<div class="forn-group has-sucess has-feedback"> 

<label class="control-label" for="sucesso">Input con sucesso</label> 

<input type="text" class="forn-control" id="sucesso"> 
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<span class="glyphicon glyphicon-ok fom-control-feedback" aria-hidden="true"x/span> 

</div> 

<div class="forn-group has-warning has-feedback"> 

<label class="control-label" for="alerta">Input con alerta</label> 

<input type="text" class="form-control" id="alerta"> 

<span class="glyphicon glyphicon-warning-sign forn-control-feedback" aria- 
hidden="true"x/span> 

</div> 

<div class="forn-group has-error has-feedback"> 

<label class="control-label" for="erro''>Input con erro</label> 

<input type="text" class="forn-control" id="erro"> 

<span class="glyphicon glyphicon-renove forn-control-feedback" aria-hidden="true"></ 
span> 

</div> 

[.../c3/ estilizacao-icones-de-validacao.html] 

Dica: Mais detalhes sobre icones do Bootstrap em [4.1] 


3.9Temas 

Ainda que nao seja do escopo deste livro estudar a criagao de temas para o Boots¬ 
trap ao encerrar este capitulo vamos mencionar algumas facilidades que visam a 
criar temas para um projeto desenvolvido com uso do Bootstrap. 

Conforme vimos no item [13] o download dos arquivos do Bootstrap nos fornece, 
alem de outros, o arquivo bootstrap.css e tambem sua versao minificada bootstrap, 
min.css. Este arquivo content todas as regras CSS para estilizagao dos inumeros 
seletores e componentes e foi criado para atender um tema cuja apresentagao e 
simples e ao mesmo tempo visualmente agradavel. 

O fato de o Bootstrap ser usado em larga escala no mundo todo faz com que 
uma aplicagao ou site desenvolvido com uso do tema padrao seja imeditamente 
reconhecido e nao raro comparado com outros sites que tambem usam aquele 
tema (eu diria que tornou-se um tema “batido” ou “manjado”). 

Tal como acontece com qualquer folha de estilo destinada a criar um visual para 
o site (um tema) o desenvolvedor podera alterar a folha de estilo de modo a criar 
um tema personalizado. Por tratar-se de uma folha de estilos com mais de 6.500 
linhas em sua versao nao minificada, a tarefa de altera-la manualmente visando 
a criar um novo tema seria extremamente ardua. 
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Felizmente existem varios mecanismos que facilitam a tarefa conforme descritos 
a seguir. 

• Variaveis LESS - Encontra-se dispomvel no site do Bootstrap uma interface 
grafica destinada a alterar as variaveis LESS que geram a folha de estilos. A 
interface encontra-se em http://getbootstrap.eom/customize/#less-variables. 

• Interfaces - Encontra-se dispomvel na internet varias interfaces graficas para 
personalizagao e download de temas. Umas semelhantes a interface LESS 
do Bootstrap e outras de uso gratuito, mais intuitivo e simples. Entre estas 
indicamos a que se encontra em http://bootstrap-live-customizer.com/. Nela 
voce escolhe o componente a estilizar e ao alterar uma das propriedades 
CSS visualiza imediatamente seu efeito. Uma busca no Google pela palavra- 
-chave “Bootstrap themes generator” retorna inumeros links que fornecem 
interfaces geradoras de temas. 

• Temas prontos - Encontra-se dispomvel na internet varios temas prontos, sendo 
uns gratuitos e outros pagos. Este o caminho mais rapido para se encontrar 
um tema para o site pois na maioria dos casos e fornecida uma folha de 
estilos CSS minificada para download e basta que se substitua o link para 
a folha de estilo nativa por um link para a folha de estilo fornecida para o 
tema escohido. Ns do livrodos 1 mostram apontam para os arquivos dos 
exemplos aqui constantes criamos botoes que permitem escolher direntes 
temas. Os temas ali constantes sao gratuitos e foram obtidos em https:// 
bootswatch.com/. Uma busca no Google pela palavra-chave “Bootstrap the¬ 
mes” retorna inumeros links para sites que fornecem temas prontos para o 
Bootstrap. 
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CAPITULO 4 

Componentes 


Neste capitulo estudaremos os componentes de interface (ou widgets) do Boots¬ 
trap. Componentes sao criados com blocos de codigo padrao e classes de estilizagao 
previstas pelo Bootstrap de modo a renderizar o componente de forma apropriada 
ao padrao de estilizagao, ou tema, adotado pelo Bootstrap. Para cada componente 
examinaremos a marcagao HTML tipica e as classes de estilizagao necessarias para 
renderizagao correta do componente. Os componentes disponiveis e que serao 
estudados neste capitulo sao: icones, dropdowns, agrupamento de botoes, botoes 
dropdown, elementos de navegagao, rotulos e marcadores, thumbnails, elementos 
tipograficos, alertas, barras de progresso, objetos de midia e classes genericas. 


4.1 Icones 

O Bootstrap incorpora um conjunto de mais de 260 icones denominado 
Glyphicon Halflings ( http://glyphicons.com /) desenvolvido por terceiros e cedido 
por seus criadores para o Bootstrap. 

Trata-se de um conjunto de icones do tipo icon font que podera ser inserido com 
uso de qualquer elemento da marcagao, que nao se destine a criar uma funciona- 
lidade do Bootstrap, isto e, o elemento nao devera conter qualquer par atributo/ 
valor especifico do Bootstrap. Em geral usa-se um elemento span para inserir icone 
inline e div para inserir icone nivel de bloco. 

O elemento que marca o icone devera estar vazio, ou seja, nenhum conteudo 
devera ser inserido no elemento. 

Sao previstas duas classes para inserir icones: glyphicon e glyphicon-*, a primeira 
content as regras CSS de estilizagao geral, validas para todos os icones do Bootstrap 
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e a segunda define o icone a ser inserido. A marcagao tipica para inserir um icone 
e mostrada a seguir. 

<span class="gliphicon glyphicon-heart"x/span> 

Esta marcagao cria o icone de um coragao (heart) na cor preta e com dimensoes 
conforme explicado a seguir. 

Icon font e um glifo, tal como e qualquer fonte, portanto pode ser estilizado como 
fontes. Os icones sao na cor preta conforme a cor padrao do Bootstrap para fontes e 
suas dimensoes (e cores) sao as mesmas das fontes contidas no elemento que insere 
o icone, ou seja, em tese, um icone inserido com uso de um elemento hi e maior do 
que um icone inserido com uso de um elemento p, e sua cor a mesma cor daqueles 
elementos. Mas, essa comparagao foi apenas para exemplificagao, nao insira icones 
com uso desses elementos, pois eles nao sao cabegalhos e muito menos paragrafos. 

Observe um exemplo real que comprova a comparagao feita. 

<hl>Coragao <span class="glyphicon glyphicon-heart"></span></hl> 

<p>Coragao <span class="glyphicon glyphicon-heart"></span></p> 

[.../c4/icones.html] 

Este exemplo encontra-se no site do livro, para consulta online. 

No primeiro caso o tamanho de fonte do elemento span e herdado do elemento 
hi e no segundo do mesmo acontece com o elemento p. 

Para alterar a cor do icone use a propriedade CSS color que altera cor das fontes. 
Observe a seguir alguns exemplos de alteragao de cores de icones. 

• CSS 

.glyphicon { color: red; } /* Altera globalnente a cor de todos os icones */ 
.glyphicon-heart { color: red; } /* Altera globalnente a cor de un determinado icone */ 

Podemos usar uma das classes de cores contextuais conforme descritas em [3.7.1] 
para alterar a cor de um icone, conforme mostrado a seguir. 

<p>Coragao <span class="glyphicon glyphicon-heart text-info"></span></p> 

Podemos usar uma classe personalizada para alterar a cor de um icone. A classe 
sera estilizada com uso de CSS na cor escolhida pelo autor. 

<p>Coragao <span class="glyphicon glyphicon-heart cor-un"></span></p> 

Tal como acontece com a cor de qualquer fonte, se nao for explicitamente definida 
uma cor para o elemento que insere o icone, ele icone, herda a cor do elemento-pai. 
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Se por um motivo qualquer voce precisar alterar as dimensoes do leone use 
a propriedade CSS font-size que altera tamanho de fontes e proceda tal como 
fizemos para alterar a cor do leone. Para as dimensoes do leone, a heranga CSS 
tambem e valida. 

Para uma lista completa dos leones e suas classes para insergao consulte 
http://getbootstrap.eom/components/#glyphicons. 


4.2 Dropdown e dropup 

Convem ressaltar que para possibilitar o funcionamento do menu dropdown e 
necessario incluir na pagina que recebera o menu a biblioteca jQuery, o plugin 
do Bootstrap para dropdown (esta no arquivo bootstrap.min.js ) conforme mostrado 
em [1.4]. 

A marcagao HTML tlpica, a definigao das classes dropdown e dropup e dos atributos 
dos elementos de marcagao necessarios para estilizar e fazer funcionar um menu 
dropdown (abre submenu para baixo) e outro dropup (abre submenu para cima) 
sao mostrados a seguir. 

• HTML 

1. <div class="dropdown"> <!-- Menu abre para baixo --> 

2. <button class="btn btn-prinary dropdown-toggle 11 type="button" id="dropDownl" 
data-toggle="dropdown" aria-expanded="true">Frutas <span class="caret"></span></button> 

3. <ul class="dropdown-nenu" role="nenu" aria-labelledby="dropDownl"> 

4. <li role="presentation''><a role="nenu-item" href="#" tabindex="-l">Abacaxi</a></U> 

5. <li role="presentation''xa role="nenu-iten" href="#" tabindex="-l">Laranja</ax/U> 

6. <li role="p resen i a ii° n " ><a role="nenu-iter r i" href="#" tabindex="-l">Maga</a></li> 

7. <li class="divider"></li> 

8. <li role="presentation"xa role="nenu-iten" href="#" tabindex="-l">Outras.. ,</ax/li> 

9. </ul> 

10. </div> <!-- /.dropdown --> 

11. <div class="dropup"> <!-- Menu abre para cina --> 

12. <button class="btn btn-prinary dropdown-toggle 11 type="button" id="dropUpl" 
data-toggle="dropdown" aria-expanded="true">Frutas <span class="caret"x/spanx/button> 

13. <!-- identico ao anterior --> 

14. </div> <!-- /.dropup --> 

[.../c4/dropdown-dropup.html] 
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Codigo comentado: 


Linha(s) Descriqio 


Linhas 1 e 10 
Linha 2 


Linhas 3 e 9 

Linhas 4 a 8 
Linha 7 

Linhas 11 a 14 
Linha 12 


Para obter o efeito dropdown e necessario criar urn div container e a 
ele definir class=dropdown. Esse div sera o container geral do dropdown. 

Aqui inserimos o elemento que ao ser clicado fara o menu abrir (no caso 
um botao). Esse elemento devera receber o atributo data - toggle="dropdown", 
pois atributos data - * sao a referenda para que o plugin dropdown que foi 
incorporado apaginajuntamente com a biblioteca jQuery identifique 
e faga funcionar o dropdown. 

Elemento ul container dos links do menu dropdown. Esse container 
devera receber o atributo class="dropdown-menu". 

Elementos U (itens da lista) containeres dos links do menu. 

Aqui um elemento li (item da lista) vazio com a atributo class="divider". 
Essa classe quando aplicada a um dos itens da lista que esteja vazio, 
cria uma linha horizontal cinza divisoria dos itens. 

Cria um menu dropup de modo identico ao anterior. Esse menu abre 
para cima. 

Marcagao do botao para acionar o menu dropdown. As classes aqui 
contidas foram estudadas na linha 2. 


Na figura 4.1 mostramos a renderizagao dos dois menus, conforme marcagao 
HTML anterior. 


Abacaxi 

Laranja 

Maca 

Outras... 


Frutas - 


Figura 4.1 - Menus dropdown e dropup. 

No nosso exemplo usamos um elemento button, teoricamente voce pode usar 
qualquer elemento HTML para acionar a abertura do menu, mas e claro, devera 
escolher o elemento mais apropriado e semantico. 


Frutas ■* 


Abacaxi 

Laranja 

Maga 

Outras... 
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Dica: Alguns componentes estudados neste capitulo dependem da inclusao de 
plugins para funcionar. Nesses casos o Bootstrap preve um atributo do tipo data-* 
com um valor declarado, que chama automaticamente o metodo do plugin no 
elemento ao qual foi aplicado. Como regra geral, sempre que voce encontrar um 
atributo data-* na marcagao, ele tern a fungao de chamar um plugin. Em geral 
o valor desse atributo e o nome do plugin (ver linha 2 do codigo comentado 
anteriormente). No capitulo 5 estudaremos, com detalhes, os plugins. 


4.2.1 Alinhamento, ti'tulo e item desabilitado 

Por padrao, os componentes do Bootstrap sao alinhados a esquerda segundo a 
convenqao de escrita para idiomas ocidentais. Esta previsto um valor para o atri¬ 
buto classe, denominado dropdown-nenu-right, a ser declarado para o container dos 
itens do menu e que se destina a alinhar os itens do menu a direita com aplicagao 
da declaragao CSS float: right;. 

Para inserir um titulo em um conjunto de itens do menu use a classe dropdow-header 
conforme marcagao mostrada a seguir. 

<li role="presentation" class="dropdown-header">Titulo dos itens</li> 

Para desabilitar um item do menu use a classe disabled conforme marcagao mos¬ 
trada a seguir. 

<li role="presentation'' class="disabled">Iter r i desabilitado</li> 

O exemplo a seguir mostra a mesma marcagao HTML do exemplo anterior para 
o menu dropup com a definigao das classes para alinhar os itens do menu a di¬ 
reita, para criar um titulo para um conjunto de itens e para desabilitar um item. 

• HTML 

<div class="dropup"> 

<button class="btn btn-primary dropdown-toggle" type="button" id="dropDownl" 

data-toggle="dropdown" aria-expanded=''true">Frutas <span class="caret"></span></button> 
<ul class="dropdown-nenu dropdown-menu-right" role="menu" aria-labelledby="dropDownl"> 
<li role="presentation" class="dropdown-header">Frutas especificas</li> 

<li role="presentation"xa role="menu-item" href="#" tabindex="-l">Abacaxi</a></li> 
<li role="presentation" class="disabled"><a role="menu-item" href="#" 
tabindex="-l">Laranja</a></li> 

<li role="presentation"xa role="menu-item" href="#" tabindex="-l">Maga</a></li> 

<li class="divider"x/li> 
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<li role="presentation"><a role= "menu-item" href="#" tabindex="-l">Outras...</a></li> 
</ul> 

</div> <!-- /.dropdown --> 

[.../c4/dropdown-alinhamento-titulo-item-desabilitado.html] 


4.3 Agrupamento de botoes 

O Bootstrap preve as classes btn-group, btn-group-vertical e btn-toolbar destinadas 
a criar agrupamentos de botoes. A seguir veremos cada uma dessas classes, sua 
aplicagao e finalidade. 


4.3.1 Agrupamento em linha 

Para agrupar botoes em linha basta criar um div container para os botoes e a ele 
definir a classe btn-group e o atributo role conforme mostrado a seguir. 

• HTML 

<div class="btn-group" role="group"> 

<button type="button" class="btn btn-primary">Novo</button> 

<button type="button" class="btn btn-primary">Abrir</button> 

<button type="button" class="btn btn-primary">Fechar</button> 

<button type="button" class="btn btn-prinary">Salva 
<button type="button" class="btn btn-prinary">Salvar</button> 

</div> 

[.../c4/agrupamento-de-botoes.html] 


4.3.2 Agrupamento vertical 

Para agrupar botoes na vertical basta criar um div container para os botoes e a ele 
definir a classe btn-btn-group-vertical conforme mostrado a seguir. 

• HTML 

<div class-'btn-group-vertical" role="group"> 

<button type="button" class="btn btn-primary">Novo</button> 

<button type="button" class="btn btn- primary">Abrir</button> 

<button type="button" class="btn btn-primary">Fechar</button> 
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<button type="button" class="btn btn-primary">Salvar</button> 
</div> 

[.../c4/agrupamento-de-botoes.html] 


4.3.3 Agrupamento barra de ferramentas 

Para criar multiplos grupos de botoes basta criar um div container para todos os 
agrupamentos de botoes (como estudados anteriormente) e a ele definir a classe 
btn-toolbar e role="toolbar" conforme mostrado a seguir. 

• HTML 

<div class="btn-toolbar" role="toolbar"> 

<button type="button" class="btn btn-primary">Novo</button> 

<button type="button" class="btn btn- primary">Abrir</button> 

<button type="button" class="btn btn- primary">Fechar</button> 

<button type="button" class="btn btn-primary">Salvar</button> 

</div> 

[.../c4/agrupamento-de-botoes.html] 

Na figura 4.2 mostramos a renderizagao dos tres casos de agrupamento de botoes, 
conforme marcagoes HTML anteriores. 


4.3.4 Agrupamento justificado 

Para agrupar botoes em linha de modo que eles se expandam com igual largura 
e ocupem toda a largura do container basta criar um div container para cada um 
dos botoes e um div container geral definindo para ele as classes btn-group e btn - 
group-justified e o atributo rote conforme mostrado a seguir. 

• HTML 

<div class="btn-group btn-group-justified" role="group"> 

<div ciass="btn-group role="group"> 

<button type="button" class="btn btn-prinary">Novo</button> 

</div> 

<div ciass="btn-group role="group"> 

<button type="button" ciass="btn btn-prinary">Abrir</button> 

</div> 
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<div class="btn-group role="group"> 

<button type="button" class="btn btn-prinary">Fechar</button> 
</div> 

<div class="btn-group role="group"> 

<button type="button" class="btn btn-prinary">Salvar</button> 
</dtv> 

</div> 

[.../c4/agrupamento-de-botoes.html] 


4.3.5 Dimensionamento 

Conforme estudamos no item [3.5.1.2] por padrao, os botoes sao estilizados com 
um padding que determina suas dimensoes. Em um agrupamento de botoes as 
classes .btn-group-lg, .btn-group-sn e .btn-group-xs, possibilitam que se altere aquele 
valor padrao de padding e se obtenha botoes com dimensoes maiores, menores e 
muito menores que o botao padrao respectivamente. 

A marcagao HTML para criar tais botoes e conforme a seguir. 

• HTML 

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group"> 

<button type="button" class="btn btn-success">novo</button> 

<button type="button" class="btn btn-success">abrir</button> 

<button type="button" class="btn btn-success">fechar</button> 

<button type="button" class="btn btn-success">salvar</button> 

</div> 

<div class="btn-group" role="group" aria-label="Default button group"> 

<!-- idem --> 

</div> 

<div class="btn-group btn-group-sm" role="group" aria-label="Mediun button group"> 

<!-- idem --> 

</div> 

«div class="btn-group btn-group-xs" role="group" aria-label="Snall button group"> 

<!-- iden --> 

</div> 

[.../c4/agrupamento-de-botoes.html] 
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Observe na figura 4.2 os diferentes tipos de agrupamento de botoes e seu dimen- 
sionamento, conforme as marcagoes mostradas no item [4.3]. 


Novo Abrir Fechar Salvar 


.btn-group-lg 


novo abrir fechar salvar 


.btn-group-vertical 



.btn-toolbar 


Novo ■ Abrir ■ Fechar I Salvar 


.btn-group .btn-group-justified 


.btn-group 


.btn-group-sm 


.btn-group-xs 


abrir fechar salvar I novo abrir fechar salvar I novo abrir fechar salvar 


Figura 4.2 - Agrupamento de botoes. 


4.4 Botoes dropdown 

Convem ressaltar que para possibilitar o funcionamento de um botao dropdown 
e necessario incluir na pagina que recebera o botao a biblioteca j Query, o plugin 
do Bootstrap para dropdown (esta no arquivo bootstrap.min.js ) conforme mostrado 
em [1.4]. 

Vejamos a seguir os casos possiveis de combinagoes para criar menus dropdown 
com botoes. 


4.4.1 Botoes dropdown simples 

Para criar um botao dropdown simples usamos um container geral com a classe 
btn-group. O botao e criado com qualquer uma das marcagoes para criar botoes 
como mostrado em [3.5.1.2] e a ele deve ser defmida a classe dropdown-toggle e o 
par atributo/valor data-toggle="dropdown". Alista de links deve ser marcada com um 
elemento ul que recebe a classe dropdown-nenu. 

A marcagao HTML tipica para criar um botao dropdown, conforme descrito, e 
mostrada a seguir. 
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• HTML 

<div class="btn-group"> 

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 
aria-expanded="false"> 

EDITAR <span class="caret"></span> 

</button> 

<ul class-'dropdown-nenu" role="menu"> 

<ll><a href="#">novo</a></li> 

<ll><a href="#">abrlr</ax/li> 

<lixa href="#">fechar</ax/ll> 

<li class="divlder"x/ll> 

<lixa href="#">salvar</ax/li> 

</ul> 

</div> 

[.../c4/botoes-dropdown.html] 


4.4.2 Botoes com icone de abertura separado 

Para criar um botao dropdown simples como icone de abertura separado usa-se 
a mesma marcagao HTML anterior com acrescimo de um novo botao contendo 
o seu texto, conforme destacado no codigo a seguir. 

• HTML 

<div class="btn-group"> 

<button type="button" class="btn btn-default>EDITAR</button> 

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 
aria-expanded="false"> 

EDITAR <span class="caret"></span> 

</button> 

<ul class="dropdown-nenu" role="nenu"> 

<li><a href="#">novo</a></li> 

<li><a href="#">abrir</ax/ll> 

<li><a href="#">fechar</ax/ll> 

<li class="divider"x/ll> 

<li><a href="#">salvar</ax/ll> 

</ul> 

</div> 

[.../c4/botoes-dropdown.html] 
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4.4.3 Botoes com icone de abertura Glyphicon e integrado 

A marcagao HTML tipica para criar o icones glyphicon integrados aos botoes 
consiste em se substituir a marcagao do icone de abertura padrao pela marcagao 
do icone glyphicon conforme mostrado em destaque a seguir. 

• HTML 

<div class="btn-group"> 

<button type="button" class="btn btn-default>EDITAR</button> 

<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown" aria-expanded="false"> 

<span class = "caret"x/span> 

<span class="glyphicon glyphicon-pencil"x/span> 

</button> 

<ul class="dropdown-nenu" role="menu"> 

<li><a href="#">novo</a></li> 

<li><a href="#">abrir</ax/li> 

<li><a href="#">fechar</a></li> 

<li class="divider"x/li> 

<li><a href="#">salvar</ax/li> 

</ul> 

</div> 

[.../c4/botoes-dropdown.html] 


4.4.4 Dimensionamento 

Conforme estudamos no item [3.5.1.2] por padrao, os botoes sao estilizados com 
um padding que determina suas dimensoes. O uso das classes .btn-group-lg, .btn- 
group-sn e .btn-group-xs, possibilita que se altere aquele valor padrao de padding e se 
obtenha botoes com dimensoes maiores, menores e muito menores que o botao 
padrao respectivamente. Ver [43.5] para exemplo de uso destas classes. 


4.4.5 Botao dropup 

E possivel inverter o sentido de abertura do botao dropdown com uso da classe 
dropup no container geral do botao como mostrado a seguir. 
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• HTML 

<div class="btn-group dropup"> 

<!-- narcagao tipica cono nostrada nos exenplos anteriores --> 

</div> 

Observe na figura 43 os diferentes tipos add-on de texto e botoes dropdown, 
conforme as marcagoes mostradas no item [4.4], 


Botoes dropdown simples 


EDITAR (btn-default) ▼ 


EDITAR (btn-primary) - I EDITAR (btn-success) I EDITAR (btn-info) ▼ I EDITAR (btn-waming) ▼ I EDITAR (btn-danger) - 


Botoes dropdown com fcone de abertura separado 


EDITAR (btn-default) 


EDITAR (btn-primary) - I EDITAR (btn-success) - I EDITAR (btn-info) - I EDITAR (btn-waming) - I EDITAR (btn-danger) - 


BUSCA 


Botoes dropdown com Glyphicon 


FAVORITOS ★ I CONTATOS >3 I LOCALIZAQAO Q I SINCRONIZAR C I EDITAR / 


Figura 4.3 - Botoes dropdown. 


4.5 Controle input com add-on 

O Bootstrap preve funcionalidades que permitem inserir texto de ajuda (ou com- 
plementar) e botoes, antes, depois ou mesmo em ambas as extremidades (antes e 
depois) dos controles (campos) de formulario input para entrada de textos. 

Convem ressaltar que para possibilitar a insergao e necessario incluir na pagina 
que recebera o controle a biblioteca jQuery, o plugin do Bootstrap para dropdown 
(esta no arquivo bootstrap.min.js ) conforme mostrado em [1.4]. 

Vejamos a seguir os casos possiveis de combinagoes para insergao em controles 

input. 


4.5.1 Texto add-on 

Para obter esses efeitos o Bootstrap preve a classe input-group a ser declarada em 
um elemento div container para o texto e o campo input. E prevista tambem a 
classe input-group-addon a ser declarada em um elemento span container para o texto. 
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A marcagao HTML para mostrar a renderizagao estilizada para esses casos e 
conforme a seguir. 

• HTML 

<!-- Texto integrado antes --> 

<div class="input-group"> 

<span class-'input-group-addon" id="addonl">@</span> 

<input type="text" class="fom-control" placeholder="Twitter" 
aria-describedby="addonl"> 

</div> 

<!-- Texto integrado depois --> 

<div class="input-group"> 

<input type="text" class="fom-control" placeholder="Seu email" 
aria-describedby="addon2"> 

<span class="input-group-addon" id="addon2">@gnail.com</span> 

</div> 

<!-- Texto integrado antes e depois --> 

<div class="input-group"> 

<span class="input-group-addon">R$</span> 

<input type="text" class="form-controL" placeholder="Totai da sua compra" 
aria-iabel="Valor en reais"> 

<span class="input-group-addon">,00</span> 

</div> 

[.../c4/input-com-add-on.html] 

Notar que ordem de declaragao dos elementos span e input e importante para 
a correta renderizagao do texto na sua posigao (antes, depois ou em ambos os 
lados do controle). 


4.5.2 Botao simples add-on 

Assim como vimos para textos no item anterior, os controles input para textos po- 
dem ser estilizados com uso de botoes integrado antes ou depois do campo input. 

Para obter esses efeitos o Bootstrap preve a classe input-group-btn a ser declarada 
no elemento span container para o botao. 

A marcagao HTML para mostrar a insergao de botao simples antes e depois do 
controle e conforme a seguir. 
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• HTML 

<!-- Botao simples antes --> 

<div class="input-group"> 

<span class="input-group-btn"> 

<button class="btn btn-default" type="button">IR</button> 

</span> 

<input type="text" class="form-control" placeholder="CPF"> 

</div> 

<!-- Botao staples depois --> 

<dtv class="input-group"> 

<input type="text" class="fom-control" placeholder="Palavra-chave"> 

<span class="input-group-btn"> 

<button class="btn btn-default" type="button">BUSCAR</button> 

</span> 

</div> 

[.../c4/input-com-add-on.html] 

Notar que ordem de declaragao dos elementos que marcam o botao e o campo 
input e importante para a correta renderizagao do botao na sua posigao. 


4.5.3 Botao dropdown add-on 

Assim como vimos para botoes simples no item anterior, os controles input para 
textos podem ser estilizados com uso de botoes dropdown integrado antes ou 
depois do campo input. O botao dropdown deve estar contido em um div com a 
classe input-group-btn. 

Para obter esses efeitos basta que se declare a marcagao HTML tipica para botoes 
dropdown em lugar de botoes simples. 

A marcagao HTML para mostrar a insergao de botao dropdown antes e depois 
do controle e conforme a seguir. 

• HTML 

<!-- Botao dropdown antes --> 

<div class="input-group"> 

<div class="input-group-btn"> 

cbutton type="button" class="btn btn-default">CONTATOS</button> 

<button type="button" class="btn btn-default dropdown-toggle" 
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data-toggle="dropdown" aria-expanded="false"> 

<span class="glyphicon glyphicon-envelope"></span> 

</button> 

<ul class="dropdown-nenu" role="menu"> 

<li><a href="#">un</a></li> 

<li><a href="#">dois</ax/li> 

<li><a href="#">tres</ax/li> 

<li class="dlvider"x/li> 

<li><a href="#">quatro</a></li> 

</ul> 

</div> 

<input type="text" class="form-control" placeholder="Contatos"> 

</div> 

<!-- Botao dropdown depots --> 

<div class="input-group"> 

<input type="text" class="fom-control" placeholder="Favoritos''> 

<div class="lnput-group-btn"> 

<button type="button" class="btn btn-default">FAVORITOS</button> 

<!-- identi 

[.../c4/input-com-add-on.html] 

Notar que ordem de declaragao dos elementos que marcam o botao e o campo 
input e importante para a correta renderizagao do botao na sua posigao. 

Observe na figura 4.4 os diferentes tipos de add-on em controles input, conforme 
as marcagoes mostradas no item [4.5], 



Figura 4.4 - Input com add-on. 
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4.6 Navegagao 

As funcionalidades de navegagao previstas pelo Bootstrap sao: abas e pills (lista 
de links simples). A marcagao padrao para criar estes dois tipos de navegagao 
consiste de um container ul com a classe nav e seus elementos li. As classes nav- 
tabs e nav-pills criam, respectivamente, os dois tipos de navegagao. 

Observe a marcagao tipica como citada e que sera usada nos exemplos de nave¬ 
gagao constantes deste item do livro. 

• HTML 

<ul class="nav"> 

<li role="presentation" class="active"xa href="#">Hone</a></li> 

<li role="presentation"><a href="#">Portf6Uo</a></li> 

<li role="presentation"><a href="#">Artigos</a></li> 

<li role="presentation"xa href="#">Contato</a></li> 

</ul> 


4.6.1 Aba basica 

Para criar um mecanismo de navegagao do tipo abas basta acrescentar a classe 
nav-tabs ao container ul da marcagao padrao mostrada anteriormente. 

• HTML 

<ul class=''nav nav-tabs"> 

<li role="presentation" class="active"><a href="#">Home</ax/li> 

<li role="presentation"xa href="#">Portf6lio</a></U> 

<li role="presentation"xa href="#">Artigos</a></li> 

<11 role="presentati 
</ul> 

[.../c4/navegacao.html] 
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4.6.2 Aba desabilitada 

Para desabilitar uma aba defina a classe disabled para elemento li que marca o link. 


• HTML 

<ul class="nav nav-tabs"> 

<li role="presentation" class="active"xa href="#">Hone</a></li> 

<li role="presentation"><a href="#">Portf6lio</a></li> 

<li role="presentation" class="disabled"><a href="#">Artigos</a></li> 
<li role="presentat> 

</ul> 

[.../c4/navegacao.html] 


4.6.3 Aba com link dropdown 

Para criar uma aba com link dropdown defina a classe dropdown para elemento li 
que marca a aba e crie a marcagao padrao para link dropdown dentro daquele 
elemento li conforme mostrado a seguir. 

• HTML 

<ul class="nav nav-tabs"> 

<li role="presentation" class="active"><a href="#">Home</a></li> 

<li role="presentation"xa href="#">Portfolio</a></li> 

<li role="presentation" class="dropdown"> 

<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" 
aria-expanded="false"> 

Artigos <span class="caret"x/spanx/a> 

<ul class="dropdown-nenu" role="menu"> 

<lixa href="#">HTML</ax/li> 

<lixa href="#">CSS</ax/li> 

<lixa href="#">javascript</ax/li> 

</ul> 

</li> 

<li role="presentli> 

</ul> 

[.../c4/navegacao.html] 
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4.6.4 Abas justificadas 

Para justificar as abas defina a classe nav-justified para elemento ul container das 
abas. Justificar tern o efeito de fazer com que as abas tenham a mesma largura e 
se estendam por toda a largura do container no qual foram inseridas. 

• HTML 

<ul class="nav nav-tabs nav-justified"> 

<li role="presentation" class="active"><a href="#">Home</ax/li> 

<li role="presentation"><a href="#">Portf6lio</a></li> 

<li role="presentation"><a href="#">Artigos</a></li> 

<li role="prese</li> 

</ul> 

[.../c4/navegacao.html] 


4.6.5 Pills 

A marcagao para criar a navegagao tipo pills e identica a mostrada para criar tabs. 
Basta substituir a classe nav-tabs pela classe nav-pills. O exemplo mostrando todos 
os casos de navegagao estudados nos itens anteriores encontra-se online. 

Observe na figura 4.5 os diferentes tipos de navegagao, conforme as marcagoes 
mostradas no item [4.6], 



Figura 4.5 - Navegagao tipos abas e pills. 
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4.7 Barra de navegagao 


O Bootstrap preve funcionalidades que permitem criar uma grande variedade de 
barras de navegagao contendo nao somente links, mas imagens, textos, caixas de 
busca, elementos de formulario, dropdown etc. As barras podem ainda ser fixas 
no topo ou rodape da aplicagao ou rolar com o conteudo. Neste item veremos 
todas as possibilidades de criagao de barras de navegagao. 

As barras de navegagao sao responsivas, como sao todos os componentes do 
Bootstrap. Barras de navegagao sao dispostas na horizontal em larguras de view¬ 
port acima de 768px. Abaixo desta largura as barras de navegagao assumem uma 
disposigao vertical tipica da navegagao movel com um icone tipo hamburger para 
revelar os links. Ao visualizar os exemplos redimensione a janela do navegador e 
observe o comportamento das diferentes barras de navegagao mostradas. 

O container geral de barras de navegagao devera ser o elemento nav, contudo se 
por qualquer motivo for necessario usar-se outro elemento, tal como um div de¬ 
vera ser, para ele container, definido o par atributo/valor role="navigation" servido 
para tecnologias assistivas. 

Convem ressaltar que para possibilitar o funcionamento das barras de navega¬ 
gao e necessario incluir na pagina que recebera o botao a biblioteca jQuery, o 
plugin do Bootstrap para dropdown (esta no arquivo bootstrap.min.js ) conforme 
mostrado em [1.4]. 

4.7.1 Barra de navegagao basica 

Trata-se de uma barra de navegagao contendo um titulo (em geral o nome ou o 
logotipo da aplicagao) e links. 

Observe a marcagao tipica para criar uma barra de navegagao basica. 

• HTML 

1. <nav class="navbar navbar-default"> 

2. <div class="container-fluld"> 

3. <div class="navbar-header"> 

4. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 


data-target="#barraBasica"> 


5. 

6 . 
7. 


<span class="sr-only">Toggle navigation</span> 


<span class="icon-bar"x/span> 
<span class="icon-bar"x/span> 
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8. <span class="icon-bar"x/span> 

9. </button> 

10. <a class="navbar-brand" href="#">Site</a> 

11. </div> 

12. <div class="collapse navbar-collapse" id="barraBasica"> 

13. <ul class="nav navbar-nav"> 

14. <li class=''active"><a href="#">Hone <span class="sr-only">(current)</spanx/ax/U> 

15. <H><a href="#">PortfoUo</a></U> 

16. <H><a href="#">Haterias</ax/li> 

17. <H><a href="#">Contato</a></li> 

18. </ul> 

19. </div><!-- /.navbar-collapse --> 

- -> 

21. </nav> 


[.../c4/barra-de-navegacao.html] 

Codigo comentado: 


Linha(s) Descrigao 


Linhas 1 e 21 


Linha 2 


Linhas 3 e 11 

Linhas 4 a 9 
Linha 5 

Linhas 6 a 8 
Linha 10 


Elemento nav container da barra de navegagao. Definir para este con¬ 
tainer as classes navbar e navbar-default. Por padrao o fundo da barra de 
navegagao e em cor clara. Se definirmos a classe navbar-lnverse em lugar 
da classe navbar-default o fundo da barra sera em cor escura. 

Logo apos o elemento nav deve ser marcado um elemento div com classe 
container ou container-fluid. Aescolha de uma ou outra classe determina 
a largura total da barra. Se quisermos que a barra ocupe toda a largura 
da viewport, em qualquer situagao, o elemento nav deve ser colocado 
como elemento-filho de body e nao dentro de div. row e neste caso usa- 
-se a classe container-fluid caso contrarontainer. No exemplo disponivel 
online no site do livro mostramos as duas situagoes. 

Container para o titulo do site e para o icone hamburger que aparece 
em dispositivos moveis. 

Botao do icone hamburger. 

Dica para tecnologias assistivas. Notar a classe sr-only mostrar este 
conteudo somente para aquelas tecnologias. Ver [1.7], 

Classe icon-bar para criar as tres linhas do icone hamburger. 

Titulo do site. O destino deste link deve ser a home-page do site. Se em 
lugar do titulo do site voce decidir por colocar uma pequena imagem 
(20px x 20px) do logotipo ou marca do site substitua o texto do link 
por um elemento img com o enderego do logotipo. 
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Linha(s) Descrigio (cont.) 

Linhas 12 a 19 Container para o elemento ul que marca os links da barra de navegagao. 

Notar que o valor do atributo id deste container e o mesmo do atributo 
data-target do botao na linha 4. 

Linhas 14 Marcar dinamicamente o elemento li container do link para a pagina 

atual com a classe active estiliza o link diferenciadamente indicando 
visualmente que aquele link e o da pagina atual. Neste caso use a 
classe sr-only (ver [1.7]) para fornecer a mesma indicagao as tecnologias 
assistivas. Marca os links da barra de navegagao. Notar que o valor do 
atributo id deste. 

O exemplo pratico mostrando a construgao de barras de navegagao basicas 
encontra-se disponlvel, no site do livro, para consulta online. Ao visualizar o 
exemplo redimensione a janela do navegador para observar o comportamento 
da barra em dispositivos com pequenas larguras de viewport (abaixo de 768px). 

Observe na figura 4.6 os diferentes tipos de barra de navegagao, conforme as 
marcagoes mostradas no item [4.7.1]. 


Site Home Portfolio Materias Contato 

Barra navbar-default 

Site Home Portfolio Materias Contato 

Barra navbar-default com logotipo 
IB Home Portfolio Materias Contato 

Barra navbar-inverse 


Site Home Portfolio Materias Contato 


Figura 4.6 - Barra de navegagao basica. 


4.7.2 Barra de navegagao fixa 

Por padrao a barra de navegagao rola acompanhando a rolagem da tela. As classes 
navbar-fixed-top e navba r- fixed-bottom quando declaradas para o elemento nav que marca 
a barra faz com que ela, barra permanega fixa na borda superior ou na borda 
inferior da tela, ou seja, nao rola com a tela. 
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Observe a marcagao tipica para criar uma barra de navegagao fixa. 

• HTML 

<nav class="navbar navbar-default navbar-fixed-top"> /* Fixa na borda superior da tela */ 


ou 


<nav class="navbar navbar-default navbar-fixed-button"> /* fixa na borda inferior da tela */ 


[.../c4/barra-de-navegacao-fixa.html] 

O exemplo pratico mostrando a construgao de barras de navegagao fixas encontra- 
-se disponivel, no site do livro, para consulta online. Ao visualizar o exemplo 
redimensione a janela do navegador para observar o comportamento da barra 
em dispositivos com pequenas larguras de viewport (abaixo de 768px). 

Observe na figura 4.7 as barras de navegagao fixas, conforme as marcagoes mos- 
tradas no item [4.7.2], 


Site Home Portfolio Materias Contato 

bla...bla.bla... 
bla. bla bla 
bla . bla ..bla.. 
bla bla . bla . 
bla ...bla ...bla... 
bla...bla..bla... 
bla.bla...bla... 

Site Home Portfolio Materias Contato 


i 


Figura 4.7 - Barra de navegagao fixa. 


Alerta: A altura padrao de uma barra de navegagao e de 50px. Assim, quando se 
preve barra de navegagao fixa na pagina e necessario que se declare explicitamente 
para o elemento body da pagina um padding-top de 50px. 
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4.7.3 Barra de navegagao com caixa de busca 

E pratica comum e amplamente utilizada inserir uma caixa de busca na barra de 
navegagao. O Bootstrap preve a classe navbar-fora a ser declarada no elemento fora, 
container da caixa de busca, para essa insergao. Adicionalmente use as classes 
gerais navbar-left e navbar-right para posicionar a caixa de busca a esquerda ou a 
direita da barra de navegagao respectivamente. 

A marcagao HTML tipica para inserir uma caixa de busca em uma barra de na¬ 
vegagao e mostrada em destaque a seguir. 

• HTML 

<nav class="navbar navbar-default"> 

<div class=''collapse navbar-collapse" id="barraComBusca"> 

<forn class="navbar-forn navbar-right" role="search"> 

<div class="forni-group"> 

<input type="text" class="fora-control" placeholder="Search"> 

</div> 

<button type="submit" class=" 

</forn> 

</nav> 

[.../c4/barra-navegacao-com-complementos.html] 


4.7.4 Barra de navegagao com botao 

O Bootstrap preve a classe navbar-btn a ser declarada no elemento button para inserir 
um botao na barra de navegagao. Adicionalmente use as classes gerais pull-left e 
pull-right para posicionar o botao a esquerda ou a direita na barra de navegagao 
respectivamente. 

A marcagao HTML tipica para inserir um botao em uma barra de navegagao e 
mostrada em destaque a seguir. 

• HTML 

<nav class="navbar navbar-default"> 

</ul> 
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<button type="button" class="btn btn-default navbar-btn pull-right">Login</button> 
</div><!-- /.navbar-collapse --> 

</nav> 

[.../c4/barra-navegacao-com-complementos.html] 


4.7.5 Barra de navegagao com link dropdown 

A funcionalidade link dropdown foi estudada no item [4.6.3] e aplica-se as barras 
de navegagao. Para estilizar dropdown esta prevista uma marcagao HTMLpadrao. 
A classe dropdown deve ser declarada para o elemento li que marca o link dropdown. 

A marcagao HTML tipica para criar um link dropdown em uma barra de nave¬ 
gagao e mostrada em destaque a seguir. 

• HTML 

<nav class="navbar"> 


<li class="active"><a href="#">Hone <span class="sr-only">(current)</spanx/a></li> 
<li><a href="#">Portf6lio</a></li> 

<li class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
aria-expanded="false">Artigos <span class="caret"x/spanx/a> 

<ul class-'dropdown-menu" role="menu"> 

<lixa href="#">HTML</ax/li> 

<lixa href="#">CSS</ax/li> 

<lixa href="#">javascript</ax/ll»Contato</ax/U> 


</nav> 

[.../c4/barra-navegacao-com-complementos.html] 


4.7.6 Barra de navegagao com texto 

Para inserir um texto em uma barra de navegagao use o elemento p (paragrafo) 
e a ele defina a classe navbar-text. Use as classes gerais pull-left e pull-right para 
posicionar o botao a esquerda ou a direita na barra de navegagao respectivamente. 

A marcagao HTML tipica para criar textos em uma barra de navegagao e mostrada 
em destaque a seguir. 
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<nav class="navbar"> 

<U class="active l, xa href="#">Home <span cLass="sr-only">(current)</spanx/a></U> 
<H><a href="#">Portf6lio</a></li> 

<li><a href="#">Portf6Uo</ax/ll> 

</ul> 

<p class="navbar-text pull-right">Site criado pelo <a href="http://piaujor.con">Maujor</ax/p> 

/div><!- - /.navbar-collapse --> 

</nav> 

[.../c4/barra-navegacao-com-complementos.html] 

Observe na figura 4.8 os complementos para barras de navegagao, conforme as 
marcagoes mostradas no itens [4.73], [4.7.4], [4.7.5] e [4.7.6], 


Barra com caixa de busca 

Site Home Portfolio Materias Contato Busca OK 


Barra com botao 

Site Home Portfolio Materias Contato Login 


Barra com link dropdown 

Site Home Portfolio Artigos * Contato 


Barra com texto 

Site Home Portfolio Materias Contato Site criado pelo Maujor 


Figura 4.8 - Barra de navegagao com complementos. 


4.8 Caminho de navegagao 

Para criar um caminho de navegagao, tambem conhecido pela sua designagao 
em ingles breadcrumb (literalmente: migalhas de pao), usamos como container 
um elemento ol ao qual declaramos a classe breadcrunb. Os itens da lista marcam 
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os links no caminho e na sequencia em que aparecem na marcagao. Use a classe 
active para destacar o texto do link para a pagina atual. 

A marcagao HTML tlpica para criar um caminho de navegagao e conforme mos- 
trada no codigo a seguir. 

• HTML 

<ol class=''breadcrupib"> 

<H><a href="#">Servigos</a></li> 

<U><a href="#">active">Aplicagoes web</U> 

</ol> 

[.../c4/breadcrumb-paginacao-la bel-badge.html] 


4.9 Paginagao 

Para criar um widget de paginagao usamos como container geral o elemento 
nav. Dentro deste elemento usamos um elemento ul ao qual declaramos a classe 
pagination. Esse elemento e o container para uma lista contendo os numeros das 
paginas a navegar e os leones para os links ‘Anterior” e “Proxima”. 


4.9.1 Widget de paginagao basica 

A marcagao HTML tipica para criar um widget de paginagao basica e conforme 
mostrada no codigo a seguir. 

• HTML 


<nav> 

<ul class="pagination"> 

<ii><a href="#" aria-labei= l, Anterior''xspan aria-hidden="true">&laquo;</span></a></Li> 
<li><a href="#">l</a></li> 

<li><a href="#">2</ax/li> 

<li>a href="#">3</ax/li> 

<li><a href="#">4</ax/U> 

<li><a href="#">5</ax/U> 

<li><a href="#" aria -label="Proxaquo;</span></a></li> 

</ui> 

</nav> 

[.../c4/breadcrumb-paginacao-label-badge.html] 


Conhega os livros do Maujor: http://livrosdomaujor.com.br 


Capi'tulo 4 ■ Componentes 


133 


Por padrao o widget de paginagao e posicionado a esquerda. Declarar no container 
nav as classes text-center ou pull-right faz com que o widget seja posicionado no 
centra ou a direita respectivamente. 


4.9.2 Dimensionamento do widget paginagao 

O widget de paginagao tem dimensoes padrao. Declarar no container ul as classes 
pagination-Ig ou pagination-sn permite que se obtenha mais duas dimensoes para 
o widget. 

A marcagao HTML tipica para criar os tres tamanhos de widget de paginagao e 
conforme mostrada no codigo a seguir. 

• HTML 


<nav> 

<ul class="pagination pagination-Lg"> <!-- tananho maior --> 

<li><a href="#" aria-label="Anterior"><span aria-hidden="true">&laquo;</span></a></li> 


ou 


<nav> 

<ul class="pagination"> <!-- tananho padrao --> 

<li><a href="#" aria-label= l, Anterior''><span aria-hidden="true">&laquo;</span></a></li> 


ou 


<nav> 

<ul class="pagination pagination-sm"> <!-- tananho nenor --> 

<li><a href="#" aria -label="Anterior"><span aria-hidden="true">&laquo;</span></ 
a></li> 


4.9.3 Estado dos links 

Os links que remetem as paginas sao estilizados, por padrao, na cor branca no 
estado em repouso e na cor cinza clara no estado mouseover. O Bootstrap preve 
as classes active e disabled a serem declaradas no elemento li, container do link, 
e que se destinam respectivamente a indicar visualmente a pagina corrente e a 
desabilitar um link. 
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A marcagao HTML tipica para aplicagao dessas classes e conforme mostrada a seguir. 


• HTML 


<nav> 

<ul class="pagination"> 

<li class="disabled''><a href="#" aria-label="Anterior"xspan aria -hidden="true"> 
&#171; spanx/a></li> 

<li><a href="#">l</a></U> 

<li><a href="#">2</a></li> 

<li class="active">a href="#">3</a></li> 

<li><a href="#">4</a></U> 

<li><a href="#">5</a></U> 

<lixa href="#" aria-laberue">&#187;</spanx/a></li> 

</ul> 

</nav> 

[.../c4/breadcrumb-paginacao-label-badge.html] 

Notar o uso opcional das entidades HTML &#171; para o link Anterior e &#187; 
para o link Proximo em lugar de &laquo; e &raquo; respectivamente. 


4.9.4 Pager 

Os links que remetem as paginas anterior e proxima sao chamados de pager. O 
Bootstrap preve a classe pager a ser declarada no elemento ul, container dos dois 
links. Os links sao estilizados como botoes com bordas arredondadas e por pa- 
drao sao posicionados no centra da pagina. O container geral do pager deve ser 
um elemento nav. 

E possivel posicionar um link a esquerda e outro a direita do container com uso 
das classes previous e next respectivamente no elemento li container do link. Para 
desabilitar um link use a classe disabled no elemento li. 

A marcagao HTML tipica para criar o widget pager e conforme mostrada no 
codigo a seguir 
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<nav> 

<ul class="pager"> 

<li><U><a href="#">Pr6xina</a></li> 
</ul> 

</nav> 

[.../c4/breadcrumb-paginacao-label-badge.html] 


4.10 Rotulos e marcadores 

Para criar rotulos estilizados com seis cores diferentes o Bootstrap preve a decla- 
ragao da classe de estilizagao geral label e das classes para colorir label-default, 
label-primary, label-success, label-info, label-warning e label-danger aseremdeclaradas 
em um elemento span contendo o rotulo. 

Para criar marcadores o Bootstrap preve a declaragao da classe de estilizagao badge 
a ser declarada em um elemento span contendo o marcador. Por padrao o rotulo e 
inserido em um pequeno retangulo cinza com bordas arredondadas e na cor branca. 

A marcagao HTML tlpica para criar rotulos e marcadores e conforme mostrada 
no codigo a seguir: 

• HTML 

<nav> <!-- Rotulos --> 

<ul class="pager"> 

<li><a href="#">Anterior</a></li> 

<li><a href="#">Proxima</a></li> 

</ul> 

</nav> 

<hl>Artigoshl> 

<h6>Menssagens <span class="badge">358</span></h6> 

[.../c4/breadcrumb-paginacao-label-badge.html] 

Observe na figura 4.9 os widgets, conforme as marcagoes mostradas no itens [4.8], 
[4.9], [4.10] e [4.11], 
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Breadcrumb 


Paginagao basica 


Servigos Aplicagoes Aplicacoes web 


« 1 2 3 4 

5 » 

Dimensao pagination-lg 

Dimensao padrao 


Dimensao pagination-sm 

« 1 2 3 4 5 » 

• 12 3 4 

5 » 

. 1 2 3 4 5 . 

Classes disabled e active 

Pager padrao 


Pager nos lados do container 

2 4 

Anterior 

Proxima 

Anterior Proxima 

Rotulos 

ETSBl irai’TWWffi 


Marcadores 

Artigos © 

Menssagens 



Figura 4.9 - Widgets. 


4.11 Jumbotron 

A palavra Jumbo Tron foi inventada pela Sony para designar uma invengao que 
conhecemos como “Telao”, presentes em locais de grandes eventos como campos 
de futebol e estadios para shows. 

No Bootstrap o widget jumbotron e uma especie de “telao” estilizado porpadrao 
com bordas e fundo cinzas destinado a destacar conteudos. 

E possivel obter-se dois tipos de jumbotron conforme mostrados a seguir. 

4.11.1 Jumbotron basico 

Jumbotron basico e aquele cuja largura e igual a largura do seu container na 
pagina, ou seja, nao se estende necessariamente por toda a largura da tela. Para 
criar um jumbotron usa-se um elemento container com a classe junbotron. 

A marcagao HTML tipica para criar o widget jumbotron basico e conforme mos- 
trada no codigo a seguir: 
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<div class="jimbotron"> 

<hl>Junbotron basico</hl> 

<p>Loren ipsurn...</ btn-lg" href="#" role="button">Saiba mais</a></p> 
</div> 

[.../c4/jumbotron.html] 


4.11.2 Jumbotron estendido 

Jumbotron estendido e aquele cuja largura e igual a largura da tela. Para obter 
este tipo de jumbotron ele deve ser marcado fora do div.container que content toda 
a marcagao do Boostrap, ou seja, devera ser elemento filho de body. Alem disso, 
devera ser criado um div.container elemento-filho de div.junbotron. 

A marcagao HTML tipica para criar o widget jumbotron estendido e conforme 
mostrada no codigo a seguir: 

• HTML 


<div class="junbotron"> 

<div class="container"> 

<hl>Junbotron estendido</hl> 

<p>Loren ipsun..,</p> 

<pg" href="#" roie="button''>Saiba nais</a></p> 

</div> 

</div> 

[.../c4/jumbotron.html] 

Observe na figura 4.10 os widgets, conforme as marcagoes mostradas no itens 
[4.11.1 e [4.11.2], 
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Jumbotron estendido 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, 
ante augue malesuada mi, id rhoncus augue lorem eget elit. 


Saiba mais... 


Jumbotron basico 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis 
laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. 


Saiba mais... 


Figura 4.10 - Jumbotron. 


4.12 Page-header 

O Bootstrap preve a classe page-header para ser definida em um elemento contai¬ 
ner para um titulo. O efeito desta classe eode estilizar o titulo com uma borda 
inferior e margens. 

A marcagao HTML tipica para criar estilizar titulos com uso de page-header e 
conforme mostrada no codigo a seguir: 

• HTML 

<div class="page-header"> 

ge-header</code> <smaU> con texto nenor</snaU></hl> 

</div> 

[.../c4/jumbotron.html] 

O exemplo desta funcionalidade encontra-se na mesma pagina que demonstra 
o jumbotron. 


Conhega os livros do Maujor: http://livrosdomaujor.com.br 









Capi'tulo 4 ■ Componentes 

4.13 Thumbnail 


139 


Thumbnail e uma palavra inglesa que em tradugao livre significa unha do po- 
legar, mas e usada tambem para designar uma coisa curta ou pequena. E e com 
este sentido que ela se aplica ao jargao empregado em desenvolvimento web. Em 
resumo no nosso contexto seu significado e: miniatura. 

Normalmente um thumbnail e uma miniatura de uma imagem, video, texto ou um 
conteudo qualquer que quando clicada leva o usuario a sua forma em tamanho 
real. O exemplo padrao e mais comum do uso de thumbnails na web e aquele no 
qual e apresentado ao usuario um grid de imagens em miniaturas que quando 
clicadas acessam a imagem em seu tamanho real. 


4.13.1 Thumbnail padrao 

O Bootstrap preve a classe thunbnail para ser definida em um elemento ancora a 
que servira de container para o elemento ing que content o thumbnail. Para dispor 
os thumbnails lada a lado use o grid. 

A marcagao HTML tipica para criar um grid de thumbnails e conforme mostrada 
no codigo a seguir: 

• HTML 

<div class="col-nd-3 col-sn-6"> 

<a href="tl. jpg" class="thumbnail"><ing src="tl.jpg" alt="carrol"></a> 

</div> 

<div class="col-nd-3 col-sn-6"> 

<a href="t2.jpg " class="thunbnail"><ing src="t2.jpg" alt=" carro2"></a> 

</div> 

<div class="coTi"id-3 col-sn-6"> 

<a href="t3.jpg " class="thunbnail"><ing src="t3.jpg" alt=" carro3"></a> 

</div> 

<div class="col-nd class="thunbnail"><ing src="t4.jpg" alt=" carro4"></a> 

</div> 

[.../c4/thumbnail.html] 
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4.13.2 Thumbnail com conteudos 

O Bootstrap oferece funcionalidades para criagao de thumbnails com conteudos 
que resultam em widgets com finalidades diferentes daquela de simplesmente 
linear para uma imagem em tamanho real. 

O exemplo mais comum de um desses widgets e aquele usado em uma pagina 
de um site de vendas online contendo thumbnails mostrado a imagem de um 
produto e a seguir textos designando e descrevendo o produto, com link para 
informagoes adicionais. 

Existe a opgao de inserir conteudo no thumbnail. Neste caso retira-se o link da 
imagem do thumbnail e cria-se um container para os conteudos a inserir. Esse 
container devera receber a classe caption. 

A marcagao HTML tipica para criar um thumbnail com conteudos e identica 
a marcagao mostrada anteriormente com as alteragoes conforme mostrada no 
codigo a seguir: 

• HTML 

<div class="col-i"id-3 col-sm-6"> 

<div class="thumbnaU"> 

<a h r ef = "tl.jpg" class = "thunbnail"> <ing src="tl.jpg" alt="carrol"></a> 

<div class="caption"> 

<h3>Descri?ao da Lrnagern</h3> 

<p>Loren ipsum dolor...</p> 
href="#" role="button">Saiba nais..,</a></p> 

</div> 

</div> 


[.../c4/thumbnail.html] 

Observe na figura 4.11 os thumbnails conforme as marcagoes mostradas. 
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Thumbnail 



Thumbnail com conteudo 



Descrigao da imagem 

Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Morbi 
eleifend. purus quis laoreet faucibus, 
ante augue malesuada 




Descrigao da imagem 

Lorem ipsum dolor sit amet. 
consectetuer adipiscing elit. Morbi 
eleifend. purus quis laoreet faucibus, 
ante augue malesuada. 


Saiba 



■ 

Descrigao da imagem 


Lorem ipsum dolor sit amet. 
consectetuer adipiscing elit. Morbi 
eleifend. purus quis laoreet faucibus, 
ante augue malesuada. 



Descrigao da imagem 

Lorem ipsum dolor sit amet. 
consectetuer adipiscing elit. Morbi 
eleifend, purus quis laoreet faucibus. 
ante augue malesuada. 



Figura 4.11 - Thumbnail. 


4.14 Caixas de alerta 

O Boostrap preve a criagao de caixas contendo mensagem ao usuario. Essas caixas 
podem ser estilizadas de quatro formas conforme a natureza da mensagem (mensa¬ 
gem de erro, mensagem de sucesso, mensagem de alerta e mensagem informativa). 

As caixas de mensagem tern bordas arredondadas, fundo e texto estilizados em 
tons de cor conforme a natureza da mensagem. 

A marcagao tipica para criar uma caixa de alerta consta de um div container ao 
qual se atribui a classe alert e o par atributo/valor role="alert". 

As classes alert-success, alert-info, alert-warning e alert-danger a serem marcadas no 
container estilizam a caixa do alerta com a cor apropriada de sucesso (verde), 
informagao (azul), alerta (amarela) e erro (salmao). 

Para criar um botao para fechar a caixa de alerta usa-se a classe alert-disnissible 
no cantainer e dentro dele marca-se um elemento button do com a classe close, o 
par atributo/valor data-dismiss="alert". 
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Para criar um link dentro da caixa de alerta use a classe alert-link no elemento 
a que marca o link. 

A marcagao HTML tlpica para criar uma caixa de alerta com todas as funciona- 
lidades descritas e conforme mostrada no codigo a seguir: 

• HTML 

<div class="alert alert-success alert-dismissible" role="alert"> 

<button type="button" class="close" data-disniss="alert" aria-label="Fechar"> 

<span aria-hidden="true">&tines;</span> 

</button> 

<p><strong>Atenuma 

<a href="#" class="alert-link">nensagen de alerta.</a> 

</p> 

</div> 

[.../c4/caixa-de-alerta.html] 


4.15 Barra de progresso 

Barra de progresso e um widget destinado a oferecer uma indicagao visual ao 
usuario do andamento de uma tarefa tal como o download de um arquivo. 

Este widget usa as funcionalidades de transigao e animagao das CSS3 que nao 
sao suportadas pelos IE9 e anteriores bem como por versoes antigas do demais 
navegadores navegadores. 

A marcagao tipica para criar uma barra de progresso basica consta de um div 
container ao qual se define a classe progress e um div elemento-filho ao qual se 
define os seguintes atributos com seus respectivos valores: 

Atributo Valor-Finalidade 


class 

role 

aria-valuenow 

aria-valuemin 

aria-valuemax 

style 


progress-bar - Servir de ancora para estilizagao. 

progressbar-Atributo destinado a definir o valor semantico do elemento 
div. 

numero - Indica o valor atual do progresso da tarefa. 
numero - Indica o valor minimo medido pela barra. 
numero - Indica o valor maximo medido pela barra. 

width em porcentagem - Indica visualmente o valor do progresso da 
tarefa. 
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Os atributos role e aria-* visam a incrementar a acessibilidade da barra de progresso. 

A porcentagem de progresso na barra e obtida com declaragao inline para a pro- 
priedade width, expressa em porcentagem. 

Declara-se o progresso da tarefa dentro de um elemento span ao qual se atribui a 
classe sr-only com a finalidade de faze-lo acessivel somente a tecnologias assistivas. 

A marcagao para criar uma barra de progresso basica e conforme mostrado a seguir. 

• HTML 

<div class="progress"> 

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuenin="0" 
aria-valuenax="100'' style="width: 60%;"> 

<span class="sr-only">60% Conplete</span> 

</div> 

</div> 

Essa marcagao renderiza uma barra de progresso padrao cuja faixa indicativa do 
progresso da tarefa e estilizada em gradiente na cor azul escura. 

Para obter barras de progresso estilizadas nas cores azul claro, verde, laranja e 
vermelho basta declarar no div.progress-bar as classes progress-bar-info, progress-bar- 
success, progress-bar-warning e progress-bar-danger, respectivamente. 

Para obter barras de progresso estilizadas segundo o efeito zebra, basta declarar 
no div.progress-bar a classe progress-bar-striped. 

Para obter barras de progresso estilizadas segundo o efeito zebra e animadas, 
basta declarar no div.progress-bar as classes progress-bar-striped e active. 

Para obter barras de progresso multiplas, basta acrescentar elementos-filho no 
container da barra. 

A marcagao HTML mostrada a seguir esclarece a obtengao desses diferentes tipos 
de barra de progresso: 

• HTML 

<div class="row"> 

<div class="col-nd-6"> 

<h4>Barras de progresso con cor en gradiente</h4> 

<div class=''progress"> 

<div class="progress-bar" role="p r ° 9 ress t>ar" aria-valuenow="60" aria-valuenin=''0" 
aria-valuenax="100" style="width: 60%;"> 
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<span class="sr-only">60% Cornplete</span> 

</dxv> 

</div> 

<div class="progress"> 

<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" 
aria-valuenin="0" aria-valuenax="100" style="width: 40%;"> 

<span class="sr-only">40% Conplete</span> 

</div> 

</div> 

<div class="progress"> 

<div class="progress-bar progress-bar-success" role="progressbar" 

aria-valuenow="80" aria-valuenin="0" aria-valuenax="100" style="width: 80%;"> 
<span class="sr-only">80% Conplete</span> 

</div> 

</div> 

<div class="progress"> 

<div class="progress-bar progress-bar-warning" role="progressbar" 

aria-valuenow="30" aria-valuenin="0" aria-valuenax="100" style="width: 30%;"> 
<span class="sr-only">30% Conplete</span> 

</div> 

</div> 

<div class="progress"> 

<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" 
aria-valuenin="0" aria-valuenax="100" style="width: 50%;"> 

<span class="sr-only">50% Conplete</span> 

</div> 

</div> 

<div class="col-nd-6"> 

<h4>Barra de progresso con efeito zebra</h4> 

<div class="progress"> 

<div class="progress-bar" role="progressbar progress-bar-striped" 

aria-valuenow="60" aria-valuenin="0" aria-valuenax="100" style="width: 60%;"> 
<span class="sr-only">60% Conplete</span> 

</dxv> 

</div> 

<div class="progress"> 

<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" 
aria-valuenow="40" aria-valuenin="0" aria-valuenax="100" style="width: 40%;"> 
<span class="sr-only">40% Conplete</span> 

</div> 
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</div> 

<div class="progress"> 

<div class="progress-bar progress-bar-success progress-bar-striped" 

role="progressbar" aria-valuenow="80" aria-valuenin="0" aria-valuenax="100" 
style="width: 80%;"> 

<span class="sr-only">80% Conplete</span> 

</div> 

</div> 

<div class="progress"> 

<div class="progress-bar progress-bar-warning progress-bar-striped" 

role="progressbar" aria-valuenow="30" aria-valuenin="0" aria-valuenax="100" 
style="width: 30%;"> 

<span class="sr-only">30% Conplete</span> 

</div> 

</div> 

<div class="progress"> 

<div class="progress-bar progress-bar-danger progress-bar-striped" 

role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuenax="100" 
style="width: 50%;"> 

<span class="sr-only">50% Conplete</span> 

</div> 

</div> 

</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-6"> 

<h4>Barra de progresso aninada</h4> 

<div class="progress"> 

<div class="progress-bar progress-bar-danger progress-bar-striped active" 
role="progressbar" aria-valuenow="50" aria-valuenin="0" aria-valuenax="100" 
style="width: 50%;"> 

<span class="sr-only">50% Conplete</span> 

</div> 

</div> 

<div class="col-nd-6"> 

<h4>Barra de progresso multipla</h4> 

<div class="progress"> 

<div class="progress-bar progress-bar-danger progress-bar-striped " 

role="progressbar" aria-valuenow="40" aria-valuenin="0" aria-valuenax="100" 
style="width: 40%;"> 
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<span class="sr-only">40% Complete</span> 

</div> 

<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="35" 
aria-valuenin="0" aria-valuenax="100" style="width: 35%;"> 

<span class="sr-only">35% Conplete</span> 

</div> 

<div class="progress-bar progress-bar-warning" role="progressbar" 

aria-valuenow="10" aria-valuenin="0" aria-valuenax="100" styie="width: 10%;"> 
<span class="sr-only">10% Conplete</span> 

</div> 

</div> 

</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-6"> 

<h4>Barras de progresso con rotulo</h4> 

<div class="progress"> 

<div class="progress-bar" role="progressbar" aria-valuenow="6ax="100" 
style="width: 60%;"> 

60% 

</div> 

</div> 

</div> 

</div> <!-- /.row --> 

[.../c4/barra-de-progresso.html] 

Na figura 4.12, mostramos a renderizagao das barras de progresso, conforme 
marcagao HTML anterior. 



Figura 4.12 - Barras de progresso. 
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4.16 Objetos de midia 

As funcionalidades do Bootstrap para marcagao de objetos de midia destinam- 
-se a criar componentes do tipo cometarios em blogs, tweets etc. cujo padrao de 
apresentagao baseia-se na insergao de uma imagem a esquerda ou a direita de 
um conteudo textual descritivo da midia. 

A marcagao padrao para esse componente usa tres elementos div conforme des- 
critos a seguir. 

• Elemento div container geral ao qual atribui-se a classe media. 

• Elemento-filho div ao qual atribui-se a classe media-body destinado a marcar 
conteudos textuais que se destinam a descrever a midia. O elemento hl-h6 
que marca o titulo do texto descritivo devera receber a classe media-heading. 

• Elemento-filho div destinado a servir de container para a midia e ao qual 
atribui-se a classe media-left ou media-right conforme se queira posicionar a 
midia a esquerda ou a direita do conteudo descritivo da midia. Este elemento 
devera ser posicionado na marcagao antes do div. media-body se o alinhamento 
for a esquerda ou depois do div. media-body se o alinhamento for a direita. Ao 
elemento que marca a midia (img, video, canvas etc.) define-se a classe media-object. 

Por padrao o topo da midia e alinhado com o topo do texto descritivo. Pode- 
mos alterar este alinhamento definindo as classes media-middle ou media-bottom no 
div.media-body. Estas classes se destinam a alinhar verticalmente a midia no centra 
ou na parte inferior, respectivamente, do texto descritivo. 

O exemplo mostrado a seguir esclarece a marcagao HTML e o uso destas classes. 

• HTML 

<div class="media"> <!-- midia a esquerda --> 

<div class="media-left" href="#"> 

<img class="media-object" src="64x64.gif" alt=""> 

</div> 

<div class="media-body"> 

<h4 class="media-heading">Titulo</h4> 

<p>...</p> 

</div> 

</div> 

<div class="media"> <!-- midia a direita --> 

<div class="media-body"> 

<h4 class="media-heading">Titulo</h4> 
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<p>...</p> 

</div> 

<div class="piedia-right" href="#"> 

<ing class="piedia-object" src="64x64.gif" alt=""> 
</div> 

</div> 

<div class="nedia"> <!-- alinhanento vertical no neio --> 
<div class="media-left media-middle" href="#"> 

<ing class="media-object" src="64x64.gif" alt=""> 
</div> 

<div class="media- body"> 

<h4 class="nedia-heading">Tltulo</h4> 

<p>...</p> 

</div> 

</div> 

<div class="nedia"> <!-- alinhanento vertical inferior --> 
<div class="nedia-left nedia-botton" href="#"> 

<ing class="Redia-object" srdiv class="inedia-body"> 
<h4 class="nedia-heading">Titulo</h4> 

<p>...</p> 

</div> 

</div> 


[.../c4/objetos-de-midia-1.html] 

Na figura 4.13, mostramos a renderizagao dos objetos de midia, conforme a mar- 
cagao HTML mostrada anteriormente. 


Exemplo de midia alinhada a esquerda 

Cras sit amet nibh libero. in gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin commodo. Cras purus odio, 
vestibulum in vulputate at, tempus viverra turpis. 


Exemplo de midia alinhada a direita 

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin commodo. Cras purus odio, 
vestibulum in vulputate at. tempus viverra turpis. 


64x64 


64x64 


Exemplo de midia alinhada verticalmente no 
meio 

64x64 Cras sit amet nibh libero. in gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin commodo. Cras purus odio, 
vestibulum in vulputate at, tempus viverra turpis. 


Exemplo de midia alinhada verticalmente 
embalxo 


64x64 


Cras sit amet nibh libero, in gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin commodo. Cras purus odio, 
vestibulum in vulputate at, tempus viverra turpis. 


Figura 4.13 -Alinhamento de objetos de midia. 

Opcionalmente podemos inserir objetos de midia com uso de elementos para 
marcagao de listas que podem ser aninhados, conforme a estrutura HTMLgeral 
mostrada a seguir. 
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<ul class="nedia-list"> 

<11 class="niedla"> 

<div class="niedla-left" href="#"> 

<lng class="media-object" src="64x64.gif" alt=""> 

</div> 

<div class="niedla-body"> 

<h4 class="nedla-heading">Tltulo</h4> 

<p>...</p> 

<div class="niedla"> <!-- nldia aninhada --> 

<div class="nedla-left" href="#"> 

<lng class="nedia-object" src="64x64.gif" alt="a-body"> 
<h4 class="media-heading">Tltulo anlnhado</h4> 

<p>...</p> 


</li> 

</ul> 

[.../c4/objetos-de-midia-2.html] 

Na figura 4.14, mostramos a renderizagao dos objetos de midia aninhados, con- 
forme a marcagao HTML mostrada anteriormente. 


Titulo 

eras sit amet nibh libero. in gravida nulla. Nulla vel metus scelerlsque ante sollicitudin commodo. eras 
purus odio, vestibulum in vulputate at, tempus viverra turpis. 

Titulo para midia aninhada - nivel 1 

64x64 eras sit amet nibb libero, in gravida nulla Nulla vel metus scelerisque ante sollicitudin 
commodo. eras purus odio, vestibulum in vulputate at, tempus viverra turpis. 

Titulo para midia aninhada - nivel 2 

eras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante 
sollicitudin commodo. eras purus odio, vestibulum in vulputate at, tempus viverra 
turpis. 

Titulo para midia aninhada - nivel 1 

64x64 eras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin 
commodo. eras purus odio, vestibulum in vulputate at, tempus viverra turpis. 


64x64 


Figura 4.14 - Objetos de midia aninhados. 
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4.17 Agrupamento de itens de listas 

Denomina-se agrupamento de itens de listas um componente do Bootstrap cuja 
finalidade e criar estilizagao diferenciada para as listas da HTML. 

A marcagao HTML para criar uma apresentagao basica deste componente e con- 
forme mostrada a seguir. 

• HTML 

<ul class="Ust-group"> 

<li class="Ust-group-iten">Abacate</li> 

<li dass="Ust-group-iten">Caranbola</li> 

<li dass="Ust-group-iten">Figo</li> 

<li dass="Ust-group-iten">Uva</li> 

</ul> 

E possivel inserir um “badge” (termo ingles que neste contexto significa marcador 
e se destina a fornecer informagao adicional) em cada item da lista. Por padrao o 
identificador e posicionado a direita do texto do item da lista. 

A marcagao HTML para criar um marcador em itens da lista e conforme mos¬ 
trada a seguir. 

• HTML 

<ul class=''list-group"> 

<li class="list-group-itern"> <span class="badge">14</span> Abacate</li> 

<li class="list-group-item"> <span class="badge">fora de epoca</span> Caranbola</li> 
<li class="Ust-group-iten''> <span class="badge">345</span> Figo</li> 

<li class="list-group-iten''> <span class="badge">em falta</span> Uva</li> 

</ul> 

Para criar uma lista de links use um container div em lugar do elemento ul e ele- 
mentos a em lugar de U conforme marcagao HTML mostrada a seguir. 

• HTML 

<div class="list-group"> 

<a class="Ust-group-iter r i active 1 ' href="#">Site do Maujor</a> 

<a dass="list-group-iter r i" href="#">Wikipedia portugues</a> 

<a dass="list-group-iter r i disabled" href="#">Site do W3C</a> 

<a class="list-group-iter r i" href="#">Google</a> 

</div> 
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Para criar uma lista de botoes com efeito rollover use um container div em lugar 
do elemento ul e elementos button em lugar de U conforme marcagao HTML 
mostrada a seguir. 

• HTML 

<div class="list-group''> 

<button type="button" class="list-group-item">Arquivo</button> 

<button type="button" class="list-group-item">Inserir</button> 

<button type="button" class="list-group-item">Copiar</button> 

<button type="button" class="list-group-iten">Enviar</button> 

</div> 

As classes contextuais se destinam a estilizar um item da lista nas cores verde, azul 
claro, amarela e vermelha, cor esta que transmite a ideia do contexto do item. As 
classes para definir as cores citadas sao list-item-success, list-item-info, list-item-warning 
e list-item-danger, respectivamente, conforme a marcagao HTML mostrada a seguir. 

• HTML 

<ul class="list-group"> 

<li class="list-group-item Ust-group-item-success">Arquivo enviado!</li> 

<li class="list-group-item Ust-group-iteni-info">Use o formato JPC</li> 

<li class="list-group-item Ust-group-item-warning">Esta faltando um arquivo</li> 

<li class="list-group-item list-group-item-danger">Podera conter virus</li> 

</ul> 

Para desabilitar um item da lista use a classe disabled no elemento que marca o 
item. Itens desabilitados sao renderizados com fundo na cor cinza. No exemplo 
que mostra a lista de links o item “Site do W3C” foi desabilitado. 


Dica: As classes contextuais e as classes active e disabled podem ser usadas 
em qualquer um dos agrupamentos de itens mostrados anterioos diferentes 
agrupamentos de itens de lista conforme as marcagoes HTMLanteriores encontra- 
se em [.../c4/agrupamento-de-itens-de-lista.html]. 


Na figura 4.15, mostramos a renderizagao destes agrupamentos de itens de lista. 
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Agrupamento basico Itens com "badge" (marcadores) 

Abacate o 

Caramboia 
Figo 
Uva 

Agrupamento de botoes Classes contextuais Lista com conteudo personalizado 

Arquivo enviado! 

Use o formato JPG 
Esta faltando um arquivo 
Podera conter virus 

Especificagoes do W3C para 
construgao de layouts 

Nessa materia voce ira conhecer o 

_ anfiampntn flat pgrysriftraropg dn W'tP 


A funcao calc() das CSS 

A funpao caic() das CSS permite que se 
definam valores CSS com uso de 
expressoes matematicas, ou seja, o 
valor adotado para a propriedade e o 
resultado de uma expressao 
matematica 


Arquivo 

Inserir 

Copiar 

Enviar 


Abacate 

Caramboia 

Figo 

Uva 


Agrupamento de links 



Figura 4.15 -Agrupamento de itens de lista. 


4.18 Paineis 

Painel e o componente do Bootstrap destinado a criar um box para conteudos. 
O box e estilizado com bordas em cantos arredondados e seu fundo e conteudos 
recebem estilizagao definida por classes espedficas. 

A marcagao HTML para criar um painel basico e conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class=''panel-body"> 

<p>Conteudo textual do painel basico - Loren ...</p> 

</div> 

</div> 

A marcagao HTML para criar um painel com titulo e conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h3 class="panel-title">Titulo do texto do painel</h3> 

</div> 

<div class="panel-body"> 
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<p>Conteudo textual do painel basico - Loren ...</p> 

</div> 

</div> 

A marcagao HTML para criar um painel com rodape e conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-body"> 

<p>Conteudo textual do painel basico - Loren ...</p> 

</div> 

<div class="panel-footer">Rodape do painel</div> 

</div> 

Para criar um painel com titulo e bordas estilizadas nas cores contextuais, azul 
escuro, verde, azul claro, amarela e vermelha, cor esta que transmite a ideia do 
contexto usamos, no container geral do painel, as classes panel-prinary, panel-success, 
panel-info, panel-warning e panel-danger respectivamente conforme mostrado na marca¬ 
gao a seguir. 

• HTML 

<div class="panel panel-prinary"> 

<div class="panel-heading"> 

<h3 class="panel-title">Titulo do texto do painel</h3> 

</div> 

<div class="panel-body"> 

<p>Conteudo textual do painel basico</p> 

</div> 

</div> 

A marcagao HTML para criar um painel com conteudo textual contendo uma 
tabela e conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h3 class="panel-title">Titulo do painel con tabela</h3> 

</div> 

<div class="panel-body"> 

<p>Conteudo textual do painel con una tabela - Loren...</p> 
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</table> 

</div> 

A marcagao HTML para criar um painel sem conteudo textual contendo uma 
tabela e conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h3 class="panel-title">Titulo do painel con tabela</h3> 

</div> 

<table class="table"> 

</table> 

</div> 

A marcagao HTML para criar um painel contendo um agrupamento de itens e 
conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h3 class="panel-title">Tltulo do painel con agrupanento de itens</h3> 

</div> 

<div class="panel-body"> 

<p>Conteudo textual do painel con un agrupanento de itens</p> 

</div> 

<ul class="list-group"> 

<li class="list-group-iten">Abacate</U> 

<li class="list-group-iten">Caranbola</U> 

<li class="list-group-iten">Figo</U> 

<li class="Ust-group-iten">Uva</li> 

</ul> 

</div> 
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Dica: Tal como mostrado para painel com tabelas, o painel com agrupamento de 
itens podera conterrquivo que demonstra os diferentes dpos de painel conforme 
as marcagSes HTML anteriores encontra-se em [.../c4/painel.html]. 


Na figura 4.16, mostramos a renderizaqao destes tipos de painel. 


Painel basico 

Conteudo textual do painel basico - Lorem ipsum 
dolor sit amet, consectetuer adipiscing elit. Morbi 
eleifend, purus quis laoreet faucibus, ante augue 
malesuada ml. id rhoncus augue lorem eget elit. 


Painel com titulo 

Titulo do texto do painel 

Conteudo textual do painel basico - Lorem ipsum 
dolor sit amet, consectetuer adipiscing elit. Morbi 
eleifend, purus quis laoreet faucibus, ante augue 
malesuada mi, id rhoncus augue lorem eget elit. 


Painel com rodape 

Conteudo textual do painel basico - Lorem ipsum 
dolor sit amet, consectetuer adipiscing elit. Morbi 
eleifend, purus quis laoreet faucibus, ante augue 
malesuada mi, id rhoncus augue lorem eget elit. 

Rodape do painel 


Painel com cores contextuais 


Titulo do texto do painel 


<div elass="panel panel-primary”>.. 

,.</div> 


Titulo do texto do painel 


<div class="panel panel-success”>. 

..</div> 


Titulo do texto do painel 


<div class=“panel panel-info”>.. 

..</div> 


Titulo do texto do painel 

<div class="panel panel-warning">...</div> 

Titulo do texto do painel 

<div class=”panel panel-danger">...</div> 


Painel com texto e tabela 

Titulo do painel com tabela 

Conteudo textual do painel com uma tabela - 
Lorem ipsum dolor sit amet. consectetuer 
adipiscing elit. Morbi eleifend. purus quis laoreet 
faucibus, ante augue malesuada mi, id rhoncus 
augue lorem eget elit. 


N°- 

Nome 

Email 

Twitter 

1 

Amaury 

amaury.rf@gmail.com 

@arf 

2 

Carlos 

carl_ 1 985@hotmail.com 

@carlos85 

3 

Mauricio 

maujor@maujor.com 

@maujor 

Painel sem texto e tabela 

Titulo do painel com tabela 

N°- 

Nome 

Email 

Twitter 

1 

Amaury 

amaury.rf@gmail.com 

@arf 

2 

Carlos 

carl_1985@hotmail.com 

@carlos85 

3 

Mauricio 

maujor@maujor.com 

@maujor 


Painel com texto agrupamento de itens 

Titulo do painel com agrupamento de itens 

Conteudo textual do painel com urn agrupamento 
de itens - Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Morbi eleifend, purus quis laoreet 
faucibus. 

Abacate 

Carambola 

Figo 

Uva 

Painel sem texto agrupamento de itens 
Titulo do painel com agrupamento de itens 
Abacate 
Carambola 
Figo 
Uva 


Figura 4.16 - Paineis. 


4.19 Mfdias responsivas 

O Bootstrap preve classes para tornar responsiva a incorporaqao de conteudos 
de terceiros, ou proprios, com uso dos elementos de marcaqao ifrane, enbed, video 
e object. 

A marcaqao HTML para tornar responsiva a incorporaqao com if rane e conforme 
mostrada a seguir. 
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• HTML 

<!-- Mldias con razao de aspecto 16:9 --> 

<div class="enbed-responsive enbed-responsive-16by9"> 

<ifrane class="enbed-responsive-iten" src="..."></ifrane> 

</div> 

<!-- Mldias con razao de aspecto 4:3 --> 

<div class="enbed-responsive enbed-responsive-4by3"> 

<ifrane class="enbed-responsive-iten" src="..."></ifrane> 

</div> 

Para incorporar um video proprio com uso do elemento video da HTML5 a mar- 
cagao HTML e conforme mostrada a seguir. 

• HTML 

<div class="enbed-responsive enbed-responsive-4by3"> 

<figure class="enbed-responsive-iten"> 

<video poster="cover.jpg" controls> 

<source src="plynouth.ogg" type="video/ogg" /> 

<source src="plynouth.np4" type="video/np4" /> 

<source src="plynouth.webn" type="video/webn" /> 

<p>Lanento! Seu navegador nao suporta o elenento vo video localnente <br /> 

<a href="plynouth.np4">fazendo o download</a></p> 

</video> 

</figure> 

</div> 

[.../c4/video-html5-responsivo.html] 

Para incorporar um video do YouTube a marcagao HTML e conforme mostrada 
a seguir. 

• HTML 

<div class="enbed-responsive enbed-responsive-16by9"> 

<figure class="enbed-responsive-iten"> 

<ifrane src="https://www.youtube.con/enbed/90R6NNXEIsE" allowfullscreen></ifrane> 
</figure> 

</div> 

[.../c4/video-youtube-responsivo.html] 
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Dica : O codigo de incorporate) (elemento ifrane) e fornecido pelo YouTube e o 
Bootstrap permite que se retire do codigo os atributos width, height e franeborder. 


Para incorporar um mapa do Google a marcagao HTML e conforme mostrada 
a seguir. 

• HTML 

<div class="enbed-responsive enbed-responsive-4by3"> 

<figure class="enbed-responsive-iten"> 

<ifrane src=" https://www.google.con/naps/enbed?..." allowfullscreen></ifrane> 
</figure> 

</div> 

[.../c4/mapa-google-responsivo.html] 


Dica: O codigo de incorporagao (elemento ifrane) e fornecido pelo Google Maps 
e o Bootstrap permite que se retire do codigo os atributos width, height, style e 
franeborder. 


4.20 Wells 

Este e um componente do Bootstrap cuja finalidade e criar um box, com padding 
padrao, para um elemento da marcagao estilizado com uma borda de cantos 
arredondados, uma cor de fundo e um efeito de baixo-relevo. 

Basta que se defina a classe well no elemento, para que se de a estilizagao. As classes 
opcionais well-sn e well-lg permitam que se diminua ou aumente respectivamente o 
padding padrao obtendo boxes com altura menor e maior em relagao a altura padrao. 

A marcagao HTML para criar os tres tipos de box (tres alturas) e conforme mos¬ 
trada a seguir. 

• HTML 

<p class="well well-sn">Pellentesque sapien..,</p> 

<p class="well">Pellentesque sapien...</p> 

<p class="well well-lg">Pellentesque sapien..,</p> 

[.../c4/wells.html] 


Conhega os livros do Maujor: http://livrosdomaujor.com.br 






158 


Boostrap 3.3.5 


Na figura 4.17, mostramos a renderizagao dos tres tipos de box. 


Well altura reduzida 

Pellentesque sapien. Sed purus sapien, elelfend ac. volutpat ac, molestie eget. massa. Nam a mbh Nulla facilisi 

Well padrao 

Pellentesque sapien. Sed purus sapien. eleifend ac, volutpat ac, molestie eget, massa. Nam a nibh. Nulla 
facilisi. 


Well altura aumentada 

Pellentesque sapien Sed purus sapien. eleifend ac, volutpat ac, molestie eget, massa Nam a nibh. Nulla 
facilisi. 


Figura 4.17 - Wells. 
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CAPITULO 5 

Plugins 


Vimos no capitulo anterior que alguns componentes do Bootstrap sao interativos. 
Consideremos a criagao de menu dropdown conforme estudado no item [4.2]. 
Naquele item mencionamos, sem mais consideragoes, que a condigao para o 
funcionamento do menu (abertura e fechamento) era a inclusao, na pagina do 
menu, da biblioteca jQuery, do plugin dropdown e da definigao do par atributo/ 
valor data-*. Naquele capitulo mencionamos ainda a necessidade de inclusao de 
plugins para fazer funcionar a navegagao em abas e as caixas de mensagens. Plu¬ 
gins estao incluidos no pacote de download do Bootstrap e eles nao sao apenas 
aqueles citados no capitulo 4. Neste capitulo estudaremos os plugins do Bootstrap 
suas aplicagoes e uso. 


5.1 Introdu^ao 

Quando fazemos o download do Bootstrap (ver item [1.3]) obtemos uma pasta 
denominada js que content dois arquivos: o arquivo com todos os plugins do 
Bootstrap em versao comentada e versao comprimida. 

Todos os componentes interativos do Boostrap dependem da inclusao da biblio¬ 
teca j Query e do arquivo de plugins para funcionar. 

E quase certeza que um projeto nao utilize todos os plugins do Bootstrap. Nesse 
caso seria injustificavel linear para o arquivo obtido no download do Bootstrap e 
seria mais sensato fazer o download personalizado, incluindo somente os plugins 
a usar no projeto. 

Amarcagao HTMLtipica para incluir os arquivos JavaScript que farao funcionar 
a interagao na pagina e conforme mostrado a seguir. 
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• HTML 

<!-- Scripts para fazer funcionar o menu --> 

<script src="//ajax.googleapis.con/ajax/Ubs/jquery/1.11.2/jquery.nin.js"></script> 
<script>window.jQuery || document.write('<script src="../bootstrap/js/jquery.min.js"> 
<\/script>')</script> 

<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> 

<body> 

<html> 

Nessa marcagao optamos por incluir os arquivos imediatamente antes da tag 
de fechamento do elemento body e nao e do escopo deste livro discutir o local de 
inclusao de scripts na pagina. 

Convent esclarecer dois pontos importantes sobre o codigo mostrado: 

• Na data em que escrevemos este capltulo a versao mais recente da biblioteca 
jQuery era a 1.11.2. No seu projeto altere para a versao atual. 

• Salve uma copia da biblioteca jQuery na pasta js (que voce obteve com o 
download) para criar o link que servira de fallback para o caso de falha no 
CDN Google. No nosso caso salvamos a biblioteca com o nome de arquivo 
j query, min.js. 

O Bootstrap nos oferece duas opgoes para aplicar o metodo principal de um 
plugin em um elemento da marcagao. Uma opgao e com a definigao, diretamente 
na marcagao HTML, de um atributo data-* no elemento que recebe o metodo 
do plugin e a outra e com uso da sintaxe da biblioteca jQuery para aplicagao de 
seus metodos. Vejamos cada uma dessas opgoes tomando como exemplo um link 
de um menu dropdown. 

Em [4.1] estudamos a construgao de menus dropdown e vimos que eles dependem 
do plugin dropdown. Para mostrar as duas opgoes de fazer funcionar o plugin, 
considere a marcagao HTML retirada daquele item, para o link Frutas. 

• HTML - Plugin com uso do atributo data-* 


<div class="dropdown"> 

<button class="btn btn-primary dropdown-toggle 1 ' type="button" id="dropDownl" 

data-toggle="dropdown" aria-expanded="true">Frutas <span class="caret"></span></button> 
<ul class="dropdown-menu" role="menu" aria-labelledby="dropDownl"> 

<lx role="presentation"xa role="nenu-item" href="#" tabindex="-l">Abacaxi</a></li> 
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<li role="presentation">...</li> 

</ul> 

</div> <!-- /.dropdown --> 

<!-- conteudos da pagina --> 

<script src="//ajax.googleapis.con/ajax/Ubs/jquery/1.11.2/jquery.nin.js"></script> 
<script>window.jQuery || document.write('<script src="../bootstrap/js/jquery.min.js"><\/ 
scri.pt>' )</script> 

<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> 

<body> 

<html> 

Nessa opgao definimos o atributo data-toggle="dropdown" no elemento que aciona o 
submenu e o Bootstrap com seus mecanismos internos aplica o metodo dropdownQ 
do plugin naquele elemento. 

• HTML - Plugin com uso da sintaxe jQuery 


<div class="dropdown"> 

<button class="btn btn-primary dropdown-toggle" type="button" ld="dropDownl" 

data - toggle = "d ropdown " aria-expanded="true">Frutas <span class="caret"></span></button> 
<ul class="dropdown-menu" role="menu" aria-labelledby="dropDownl"> 

<li role="presentation"><a role="menu-item" href="#" tabindex="-l">Abacaxi</a></li> 
<li role="presentation">..,</li> 


</ul></div> <!-- /.dropdown --> 

<!-- conteudos da pagina --> 

<script src='7/ajax.googleapis.com/ajax/Ubs/jquery/1.11.2/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="../bootstrap/js/jquery.min.js"> 
<\/script>')</script> 

<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> 

<script type="text/javascript"> 

$( 1 .d ropdown-toggle').d ropdown(); 

</script> 

<body> 

<html> 

Nessa opgao nao ha definigao de atributo data-toggle="dropdown" no elemento que 
aciona o menu. Usa-se a sintaxe jQuery padrao para chamar o metodo dropdownQ 
naquele elemento. 
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O uso do atributo data-* deve ser considerado em primeiro lugar, contudo a ou- 
tra opgao oferece ao desenvolvedor maior flexibilidade na aplicagao do metodo, 
podendo tirar proveito, por exemplo, do encadeamento que a sintaxe jQuery 
possibilita como mostrado a seguir. 

$( 1 .dropdown-toggle').dropdown().css('color', 1 #f00 1 ); 

ou ainda, definir opgoes: 

$('#janelaModal').nodal( { keyboard: false } ); // desabilita abertura por teclado 

E possivel desabilitar globalmente a opgao data-* para fazer funcionar plugins 
conforme mostrado a seguir: 

$('body').off('data-api'); // desabilita para todos os plugins 

Podemos tambem desabilitar a opgao data-* para um determinado plugin con- 
forme mostrado a seguir: 

$('body').off('dropdown.data -api'); // desabilita o plugin dropdown 
Construtores jQuery estao disponiveis com a sintaxe classica: 

$.fn.none-do-plugin.Constructor 


5.2 Plugins 

Nos itens a seguir estudaremos cada um dos plugins disponiveis no Bootstrap. 

O script dos plugins do Bootstrap encontram-se no arquivo existente na pasta js 
denominado bootstrap.min.js. 

No caso de download compilado esse arquivo content todos os plugins do Boots¬ 
trap. Opcionalmente voce podera incluir somente os plugins que ira utilizara no 
seu projeto fazendo o download personalizado. 

No caso de download de todo o Bootstrap (source) voce podera obter os arquivos 
dos plugins individualmente no arquivo bootstrap.js que encontra-se na pasta js. 


5.2.1 Transudes 

O plugin para transigoes destina-se a ser usado em conjunto com outros plugins 
cujas funcionalidades admitem uso de transigao tal como obtengao de efeitos slide 
e fade em janelas modais, abas, caixas de alerta e paineis. As transigoes disponiveis 
nesse plugin sao slide e fade. 


Conhega os livros do Maujor: http://livrosdomaujor.com.br 


Capi'tulo 5 ■ Plugins 

5.2.2 Janela modal 


163 


Janela modal e uma poderosa interface de dialogo com o usuario que se destina 
a variados usos e proporciona um visual agradavel ao visitante da pagina. 

O Bootstrap possibilita a criagao de janela modal com uso de marcagao tipica e 
o mecanismo de abertura e fechamento da janela pode ser definido de duas for¬ 
mas: diretamente com uso do par atributo/valor data-toggle="nodal" ou codificando 
com uso de metodos JavaScript previstos no Bootstrap. E possivel ainda obter o 
efeito de janela modal criando scripts personalizados com uso dos metodos e 
propriedades proprios da biblioteca j Query 

5.2.2.1 Com uso de data-toggle 

Para acionar o mecanismo de abertura e fechamento da janela modal basta 
declarar o atributo data-toggle para o elemento que marca o botao ou o link de 
abertura da janela. 

Os mecanismos internos do Bootstrap identificam aquele atributo na marcagao 
e acionam os codigos JavaScript necessarios para abrir e fechar a janela. O desen- 
volvedor nao precisa criar codigo JavaScript para acionar a janela, eles sao criados 
automaticamente pelo Bootstrap. 

A marcagao HTML mostrada a seguir e a padrao do Bootstrap para criagao de 
uma janela modal com uso do atributo data-toggle. 

• HTML 

1. <button type="button" class="btn btn-prinary btn-lg" data-toggle="modal" 

data-target="#nodalLogin"> 

2. Abrir janela nodal 

3. </button 

4. <div class="nodal fade" id="nodalLogin" tabindex="-l" role="dialog" 

aria-labelledby="nodalLoginLabel"> 

5. <div class="nodal-dialog" role="docunent"> 

6. <div class="nodal-content"> 

7. <div class=''nodal-header"» 

8. <button type="button" class="close" data-disniss="nodal" 

aria - label="Close"><span aria-hidden="true">&tines;</spanx/button> 

9. <h4 class="nodal-title">Area adninistrativa</h4> 

10. </div> 

11. <div class=''nodal-body"> 

12 <!-- conteudo da janela nodal --> 
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13. </div> 

14. <div class="nodal-footer"> 

15. <button type="button" class="btn btn-default" 

data-disniss="nodal">Fechar</button> 

16. </div> 

17. </div> <!-- /.nodal-content --> 

18. </div> <!-- /.nodal-dilog --> 


19. </div> <!-- /.nodal --> 


[.../c5/modal-data-toggle.html] 

Codigo comentado: 


Linha(s) Descri^ao 


Linhas 1 a 3 


Linha 4 a 19 


Linhas 5 e 6 
Linhas 7 a 10 


Linha 11 a 13 


Botao para abertura da janela modal. O atributo data-target deve apon- 
tar para o valor do atributo id do container geral da janela, no nosso 
caso o div#nodalLogin na linha 4. Opcionalmente em lugar de um botao 
para abrir a janela poderiamos usar um link e neste caso o atributo 
href do link apontaria para o id do container geral da janela, no nosso 
caso href="#nodalLogin". Aclasse btn definida para o link de abertura da 
janela faz com que os mecanismos internos do Bootstrap transformem 
o link em um botao. Esse botao pode ser estilizado com uso de classes 
adicionais, tal como btn-prinary e btn-lg. A classe data-toggle, definida 
para aquele link, informa ao Boostrap que a j anela modal tera seu script 
de abertura e fechamento inserido automaticamente sem necessidade 
de codificagao JavaScript pelo autor. 

Marcagao do div container da janela modal. A classe nodal e de uso 
obrigatorio e informa ao Boostrap que trata-se do container de uma 
janela modal. A classe fade faz com que o efeito de abertura seja por 
deslizamento da janela no sentido vertical, na diregao de cima para 
baixo e com efeito de esmaecimento. Opcionalmente podemos omitir 
o valor fade que produz o efeito de mostrar e esconder a janela sem 
dislazamento e esmaecimento, ou seja, abertura e fechamento fixa na 
sua posigao. Sugiro fazer uma copia do exemplo retirar a classe fade 
verificando na pratica os dois efeitos de abertura/fechamento. O atributo 
id e de livre escolha do autor. 

Containeres auxiliares para estilizagao e scripts. 

Marcagao do div. nodal-header container do cabegalho da janela. Esse div 
content o botao superior direito de fechamento da janela (um xis) e o 
titulo da janela. O atributo data-disniss com o valor nodal informa ao 
Bootstrap que se trata de um botao para fechar a janela. A classe close 
estiliza e posiciona o botao x(xis) de fechamento da janela. 

Marcagao do div. nodal-body container do corpo (conteudo principal) 
da janela. 
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Linha 14 a 16 Marcagao do div.nodal-footer container do rodape da janela. Esse div 
contem o botao inferior de fechamento da j anela. O atributo data-disntss 
com o valor nodal informa ao Bootstrap que se trata de um botao para 
fechar a janela. 

A renderizagao da janela modal constante do arquivo anterior e conforme mos- 
trada na figura 5.1. 


Area administrativa 


Nome de usuario: 


Ci Lembrarmeus dados 

Perdeu a senna? 


Fechar 


Figura 5.1 - Janela modal. 


52 . 2.2 Com uso de JavaScript nativo 

A segunda opgao para acionar o mecanismo de abertura e fechamento da janela 
modal e com uso dos metodos JavaScript nativos do Bootstrap. 

Na verdade, nas duas opgoes o mecanismo usa JavaScript a diferenga e que para a 
primeira opgao sao os mecanismos internos do Boostrap que identificam os atri- 
butos da marcagao HTML e acionam os codigos JavaScript necessarios para abrir 
e fechar a janela e na opgao com JavaScript nativo o desenvolvedor precisa definir 
manualmente os metodos JavaScript proprios do Bootstrap para acionar a janela. 

O metodo nativo para inicializar uma janela modal tern a sintaxe conforme 
mostrada a seguir. 

$('#nodalLogin').modal(options) 

onde #nodalLogin e o valor do id do container da janela modal. O nome desse valor, 
obviamente, e de livre escolha do autor e no nosso exemplo usamos modalLogin. 
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As opgoes para esse metodo sao: 


Nome 

Tipo 

Default 

Descrigao 

backdrop 

boleano 

true 

Define a existencia de um fundo na cor preta e transparente para a janela 
modal. Pode-se ainda definir o valor static que define o fundo, mas 
desabilita o fechamento da janela quando dicamos nesse fundo. 

keyboard 

boleano 

true 

Define o fechamento da janela modal quando a teda Esc e pressionada. 

show 

boleano 

true 

Mostra a janela modal na inicializagao da pagina. 

remote 

path 

false 

0 valor para essa opgio e o url de um arquivo remoto cujo conteudo sera 
carregado com uso do metodo AJAX load da biblioteca jQuery e injetado 
no container .modal-content. Alternativamente podemos usar o atributo 
href na marcagio HTML para definir o url remoto a carregar, conforme 
mostrado no exemplo a seguir. 

<a data-toggle="modal" href="remoto.html" 
data-target="#modalLogin"> Abrir janela modal</a> 

Esta funcionalidade esta em desuso e sera retirada na versao BS4. 


Opcionalmente, podemos definir as opgoes do metodo JavaScript nativo decla- 
rando-as com uso dos atributos data-*. Por exemplo: data-keyboard="false". 

Sao previstos ainda os metodos conforme as sintaxes mostradas a seguir. 

$('#nodalLogin 1 ).modal("toggle") // Abre e fecha a janela nodal 
$('#nodalLogin').modal("show") // Abre a janela nodal 

$('#nodalLogin').modal("hide") // Fecha a janela nodal 

Os eventos nativos sao descritos a seguir. 


Evento 

Descri^ao 

show.bs.nodal 

Esse evento ocorre imediatamente apos a chamada de uma instancia do metodo show. 

shown.bs.nodal 

Esse evento ocorre assim que a janela modal torna-se visfvel para o usuario (apos as 
transigoes CSS terem ocorrido). 

hide.bs.nodal 

Esse evento ocorre imediatamente apos a chamada de uma instancia do metodo hide. 

hidden.bs.nodal 

Esse evento ocorre assim que a janela modal torna-se invisfvel para o usuario (apos as 
transigoes CSS terem ocorrido). 

loaded.bs.nodal 

Esse evento ocorre assim que um conteudo remoto requisitado e carregado na janela modal. 


No exemplo a seguir mostramos o uso de metodos JavaScript para abertura de 
janela modal e a captura de eventos para abrir uma caixa de alerta JavaScript 
identificando o evento disparado. Amarcagao HTML e a mesma marcagao usada 
no anterior com a unica diferenga que dela retiramos o par atributo valor data- 
toggle="nodal" conforme mostrado a seguir. 
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1. <button type="button" class="btn btn-primary btn-lg" data - toggle = "nodal" data- 
target="#nodalLogin"> 

2. Abrir janela nodal 

3. </button 

4. <div class="nodal fade" id="nodalLogin" tabindex="-l" role="dialog" aria- 
labelledby="nodalLoginLabel"> 

5. <dlv class="nodal-dialog" role="docunent"> 

... <!-- identico ao exenplo anterior --> 

18. </div> <!-- /.nodal-dilog --> 

19. </div> <!-- /.nodal --> 

Feitas essa unica alteragao na marcagao HTML criamos o script conforme mos- 
trado a seguir. 

• JavaScript 

<script type="text/javascript"> 

$('button[data-target="#nodalLogin"]').on('click', functionQ { 

$( 1 #nodalLogin 1 ). nodal(' toggle'); 

}); 

$('#nodalLogin 1 ).on('show.bs.nodal', function () { 
alert('Modal vai ser aberta\nEvento: show.bs.nodal'); 

}); 

$('#nodalLogin 1 ).on('shown.bs.nodal', function () { 
alert('Modal foi aberta\nEvento: shown.bs.nodal'); 

}); 

$('#nodalLogin').on('hide.bs.modal', function () { 
alert('Modal vai ser fechada\nEvento:hide.bs.nodal'); 

}); 

$('#nodalLogin').on('hidden.bs.nodal', function () { 
alert('Modal foi fechada\nEvento:hidden.bs.nodal'); 

}); 

</script> 

</body> 

</htnl> 

[.../c5/modal-javascript.html] 

Visualize esse exemplo online para constatar o disparo dos eventos show, shown, 
hide e, hidden. 
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5.2.3 Dropdown 

Dropdown e uma funcionalidade que permite ao autor criar um efeito de abertura 
e fechamento de submenus. Podemos inserir dropdown nos componentes barras 
de navegagao, abas e pills estudados no capitulo 4. 

O Boostrap possibilita a criagao de menu dropdown com uso de marcagao tipica 
e o mecanismo de abertura do menu pode ser definido de duas formas: direta- 
mente com uso do par atributo/valor data-toggle="dropdown" ou codificando com 
uso do metodo JavaScript dropdownQ previsto no Bootstrap. 

5.2.3.1 Com uso de data-toggle 

A marcagao HTML mostrada a seguir e a padrao do Bootstrap para criagao de 
um menu dropdown criado com uso do par atributo/valor data-toggle="dropdown" e 
inserido em uma barra de navegagao (ver [4.7]). 

Notar que o valor do atributo data-target do botao contido em div.navbar-header 
deve ser igual ao id do container geral do menu dropdown. 

• HTML 

<nav class="navbar navbar-default"> 

<div class=''navbar-header"> 

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 

data-target="#barraDataToggle"> 

<a class="navbar-brand" href="#">Automoveis</a> 

</div> 

<div class="collapse navbar-collapse" id="barraDataToggle"> 

<ul class="nav navbar-nav"> 

<li class="active"><a href="#">Hone <span class="sr-only">(current)</span></a></li> 
<li><a href="#">Ford</a></li> 

<li class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" 
role="button" aria-expanded="false">Renault<span class="caret"></span></a> 
<ul class="dropdown-r r ienu" role="menu"> 

<li><a href="#">Clio</ax/li> 

</ul> 

</U> 

<li class="dropdown"> 
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<a href="#" class="dropdown-toggle" data-toggle="dropdown" 
role="button" aria-expanded="false">Volkswagen<span class="caret"></span></a> 
<ul class=''dropdown-nenu" role="menu"> 

<li><a href="#">Novo Gol</a></li> 

</ul> 

</li> 

<li><a href="#">Contato</a></li> 

</ul><!-- /.navbar --> 

</div><!-- /.navbar-collapse --> 

</nav> 


[.../c5/dropdown-data-toggle.html] 

A renderizagao da barra de navegagao com link com efeito dropdown conforme 
mostada na marcagao HTML anterior e conforme a figura 5.2. 


Dropdown em barra de navegapao 

Automoveis Home Ford Renault" 

Volkswagen» Contato 


Novo Gol 

Gol G4 

Fox 

Crossfox 

Outros 



Figura 5.2 - Dropdown em barra de navegagao. 


5.2.3.2 Com uso de JavaScript nativo 

A segunda opgao para obter o efeito dropdown e com uso dos metodos JavaScript 
nativos do Bootstrap. 

Na verdade, nas duas opgoes o mecanismo usa JavaScript a diferenga e que para 
a primeira opgao sao os mecanismos internos do Bootstrap que identificam os 
atributos da marcagao HTML e acionam os codigos JavaScript necessarios para 
fazer funcionar o dropdown e na opgao com JavaScript nativo o desenvolvedor 
precisa definir manualmente os metodos JavaScript proprios do Bootstrap para 
acionar o dropdown. 


Conhega os livros do Maujor: http://livrosdomaujor.com.br 



170 Boostrap 3.3.5 

O metodo nativo para inicializar um dropdown tem a sintaxe conforme mostrada 
a seguir. 

$('#dropDownN 1 ).dropdown() 

onde #doprDownN e o valor do id do elemento ul que content os liks do dropdown. O 
nome desse valor, obviamente, e de livre escolha do autor e no nosso exemplo usa- 
mos dropDownl para o submenu do link “Renault” e dropDown2 para o submenu do link 
“Volkswagen” pois mostramos estes dois links com dropdown na bara de navegagao. 

Este metodo nao admite opgoes. 


Os eventos nativos sao descritos a seguir. 


Evento 

Descrigao 

show.bs.dropdown 

Esse evento ocorre imediatamente apos a chamada de uma instancia do metodo show. 

shown.bs.dropdown 

Esse evento ocorre assim que a janela modal torna-se visivel para o usuario (apos as 
transigoes CSS terem ocorrido). 

hide.bs.dropdown 

Esse evento ocorre imediatamente apos a chamada de uma instancia do metodo hide. 

hidden.bs.dropdown 

Esse evento ocorre assim que a janela modal torna-se invisivel para o usuario (apos as 
transigoes CSS terem ocorrido). 


Estes eventos sao atrelados aos elementos que marcam os links de abertura do 
dropdown e no nosso exemplo adotamos o id="abreDropDownl" para o link “Renault” 
e id="abreDropDown2" para o link “Volkswagen”. 

Se os eventos show.bs.dropdown e shown.bs.dropdown forem disparados por agao de click, 
esta disponivel a propriedade relatedTarget que retorna o elemento que foi clicado. 

No exemplo a seguir mostramos o uso do metodo JavaScript para abertura de 
dropdown, para a captura de eventos e para inspecionar a propriedade relatedTarget. 
Amarcagao HTMLe a mesma marcagao usada no exemplo anterior, com acrescimo 
dos atributos id conforme mostrado em destaque na marcagao HTML a seguir. 

Alerta: Ao contrario do componente modal estudado anteriormente para o 
componente dropdown e necessario que o par atributo valor data-toggle="dropdown" 
nao seja retirado da marcagao HTML. 


• HTML 

/* igual a marcagao do exemplo anterior */ 

<li class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
aria-expanded="false"> 
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Renault<span class="caret" id="abreDropDownl"></span></a> 

<ul class="dropdown-nenu" role="nenu" id="dropDownl"> 

<li><a href="#">Clio</a></U> 

</ul> 

</li> 

<li class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
aria-expanded="false"> 

Volkswagen<span class="caret" id="abreDropDown2"></span></a> 

<ul class="dropdown-nenu" role="nienu" id="dropDown2"> 

<li><a href="#">Novo Gol</a></li> 

</ul> 

</li> 

<li><a href="#">Contato</a></li> 

</ul><!-- /.navbar --> 

</div><!-- /.navbar-collapse --> 

</nav> 

O script e conforme mostrado a seguir. 

• JavaScript 

<script type="text/javascript"> 

$('#abreDropDownl, #abreDropDown2"]').on('click', function() { 

$( 1 #dropDownl, #dropDown2'),dropdown('toggle'); 

}); 

$( 1 .dropdown 1 ).on('show.bs.dropdown', function (e) { 
var textoLink = $(e.relatedTarget).text(); 

alert('Dropdown vai ser aberto\nEvento: show.bs.dropdown\nLink clicado: ' + 
textoLink); 

}); 

$('.dropdown').on('shown.bs.dropdown', function () { 
alert('Dropdown foi aberto\nEvento: shown.bs.dropdown'); 

}); 

$( 1 .dropdown 1 ).on('hide.bs.dropdown', function () { 

alert('Dropdown vai ser fechado\nEvento: hide.bs.dropdown'); 

}); 

$( 1 .dropdown').on('hidden.bs.dropdown', function () { 

alert('Dropdown foi fechado\nEvento: hidden.bs.dropdown'); 

}); 
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</script> 

</body> 

</html> 


[.../c5/dropdown-javascript.html] 

Visualize esse exemplo online para constatar o disparo dos eventos show, shown, hide 
e, hidden e o uso da propriedade relatedTarget. 


5.2.4 Scrollspy 

Scrollspy e uma funcionalidade que permite ao autor monitorar automaticamente 
a posigao da barra de rolagem da pagina quando se tem navegagao interna (in- 
-page), ou seja, navegagao na propria pagina. 

Navegar na propria pagina significa que o clique em link de um mecanismo de 
navegagao em lugar de conduzir o usuario para uma nova pagina (pagina dentro 
do mesmo site ou externa) e conduzido a um determinado ponto da propria 
pagina (aquela que content o mecanismo de navegagao). 

Em geral navegagao interna e indicada para paginas extensas com segoes que po- 
dem ser consultadas (lidas) individualmente sem necessidade de leitura corrida 
para seu entendimento. Por exemplo: pagina FAQ desenvolvida sem o recurso 
do menu sanfona, na qual as perguntas estao inseridas como itens de um menu 
e as respostas como alvo do clique em uma pergunta. 

Outra forma de navegagao interna, para a qual podemos aplicar a funcionalidade 
scrollspy e aquela na qual os conteudos alvo dos links sao inseridos dentro de um 
container com altura fixa e existencia de barra de rolagem para acessar conteudos 
em overflow com aquela altura. 

O mecanismo do Bootstrap para fazer funcionar o scrollspy consiste em desta- 
car o link quando o usuario chega ao seu alvo por agao de rolagem na barra de 
rolagem ou quando o usuario aciona a barra de rolagem atingindo os alvos dos 
links. So faz sentido projetar scrollspy quando o menu de navegagao permanece 
fixo e a vista do usuario durante a rolagem. 

A marcagao HTML tipica para navegagao interna e conforme mostrada a seguir. 
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<a href="#css">CSS</a> 

<a href="#htnl">HTML</a> 

<a href="#js">javascript</a> 

<div id="css">CSS</div> 

<!-- texto CSS --> 

<div id="css">HTML</div> 

<!-- texto HTML --> 

<div id="css">javascript</div> 
<!-- texto javascript --> 


O atributo href de cada link e igual ao valor do atributo id precedido do sinal # 
(tralha) definido para o elemento da pagina para o qual se pretende navegar. Na 
marcagao anterior um elemento div. 

Existem duas maneiras de se projetar scrollspy: diretamente com uso do par 
atributo/valor data-spy="scroll" ou codificando com uso de metodos JavaScript 
previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

5.2.4.1 Scrollspy para a pagina com uso de data-spy 

Para acionar o mecanismo scrollspy basta declarar os atributos data-spy e data-target 
para o elemento cuja barra de rolagem se pretende monitorar. No nosso exemplo 
vamos monitorar a barra de rolagem vertical da pagina (janela do navegador). 

Os mecanismos internos do Bootstrap identificam aqueles atributos na marcagao 
e acionam os codigos JavaScript necessarios para fazer funcionar o scrollspy O 
desenvolvedor nao precisa criar codigo JavaScript, eles sao criados automatica- 
mente pelo Bootstrap. 

No exemplo a seguir mostramos os codigos para a criagao de uma barra de navega- 
gao fixa (ver [4.7.2]) no topo da pagina destinada a navegagao interna e utilizamos 
a funcionalidade scrollspy para monitorar a barra de rolagem vertical da pagina. 

• HTML 

1. <body data-spy="scroU" data-target="#barraNavegacao"> 

2. <div class="container-fluid" id="hone"> 

3. ... 

4. <nav class="navbar navbar-default navbar-fixed-top" id="barraNavegacao"> 
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5. <div class="container-fluid"> 

6. div class="navbar-header"> 

7. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 

data-target="#barraFixaTop"> 


9. </button> 

10. <a class="navbar-brand" href="#">Site</a> 

11. </div> 

12. <div class="collapse navbar-collapse" id="barraFixaTop"> 

13. <ul class="nav navbar-nav"> 

14. <li class="active"><a href="#hone">Home<span class="sr-only">(current)</span> 

</a></li> 

15. <li><a href="#portfolio">Portf6lio</ax/U> 

16. <lixa href="#piaterias">Materias</ax/ll> 

17. <li><a href="#contato">Contato</ax/li> 

18. </ul> 

19 </div><!-- /.navbar-collapse --> 

20. </div><! - - /.container-fluid --> 

21. </nav> 

22. <div id="portfolio"> ... </div> 

23. <dlv id="materias">. .. </dtv> 

24. <dlv id="contato"> ... </dtv> 

25. ... 


[.../c5/scrollspy-body-data-spy.html] 

Codigo comentado: 


Linha(s) Descri^ao 


Linha 1 


Linhas 4 a 21 


Linhas 14 a 17 


Para fazer funcionar o plugin scrollspy basta acrescentar os pares atri- 
buto/valor data-spy="scroll" e data-target="valor" no elemento body da 
pagina a monitorar a rolagem. O valor do atributo data-target e o do 
seletor que define o container do mecanismo de navegagao, no nosso 
exemplo nav#barraNavegacao que e o id do elemento nav container da barra 
de navegagao. 

Marcagao que cria uma barra de navegagao fixa no topo da pagina. Ver 
[4.7.2], Notar na linha 4 o container da barra de navegagao com o id 
de valor igual barraNavegacao que foi referenciado no atributo data-target 
do elemento body como descrito no item anterior. 

Marcagao dos links da barra de navegagao com o atributo h ref apontando 
para o id do container de conteudos de cada link como mostrado nas 
linhas 2,22, 23 e 24 respectivamente. 
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Em [4.7.2], quando estudamos barras de navegagao fixas dissemos o seguinte: 


Ao optar pelo uso de uma barra de navegagao fixa e preciso definir um 
padding de no minimo 50px para o elemento body com a finalidade de 
abrir espago para insergao da barra. Declare padding-top e/ou padding- 
bottom conforme use barra fixa no topo e/ou rodape. 

Nesse exemplo, ao clicarmos um link, a pagina rola para o texto do elemento 
alvo do link (um elemento div) que e colocado no topo da janela. Como temos 
uma barra de navegagao fixa no topo ela ira cobrir o inlcio daquele texto ate uma 
altura de 50px, que e a altura da barra de navegagao. Entao, precisamos declarar 
regras de estilo para fazer o texto alvo do link descer no minimo 50px e sair de 
tras da barra de navegagao. Para isso acrescente a seguinte folha de estilo a pagina: 

• CSS 

body { padding-top:50px;background: #ccc; } 

#portfolio, #naterias, #contato { 
padding-top: 50px; 

/* 0 padding-top aqui e necessario para posicionar o container do conteudo abaixo da 
barra fixa */ 

} 

Os valores definidos na folha de estilo mostrada sao validos para a aplicagao pa- 
drao de estilos do Bootstrap em layouts fixos. Se necessario altere aqueles valores 
para contemplar as particularidades do seu projeto. 

Ao consultar esse arquivo clique os links da barra de navegagao e depois movi- 
mente a barra de rolagem da pagina para cima e para baixo observando o plugin 
scrollspy em agao. 

5.2.4.2 Scrollspy em container com uso de data-spy 

No exemplo a seguir mostraremos a criagao de uma barra de navegagao basica 
destinada a comandar a navegagao em um container da pagina e utilizamos a 
funcionalidade scrollspy para a barra de rolagem vertical do container. A barra de 
rolagem no container sera criada com uso das propriedades CSS height e overflow 
para o container. 

Usaremos a mesma marcagao HTML do exemplo anterior com as modificagoes 
conforme mostradas em destaque a seguir. 
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• HTML 

1. <body data-spy="scroll" data-target="#barraNavegacao"> 

2. <div class="container-fluid" id="hone"> 

3. ... 

4. <nav class="navbar navbar-default navbar-fixed-top" id="barraNavegacao"> 

5. <div class="container-fluid"> 

6. div class="navbar-header"> 

7. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 

data-target="#barraFixaTop"> 

8 . 

9. </button> 

10. <a class="navbar-brand" href="#">Site</a> 

11. </div> 

12. <dlv class="collapse navbar-collapse" ld="barraFlxaTop"> 

13. <ul class="nav navbar-nav"> 

14. <U class="active"xa href="#hone">Hone<span class="sr-only">(current)</span></ax/li> 

15. <li class="active"><a href="#portfolio">Portf6lio<span class="sr- 

only">(current)</spanx/a></ll> 

16. <li><a href="#naterias">Materias</ax/li> 

17. <li><a href="#contato">Contato</a></li> 

18. </ul> 

19 </div><!-- /.navbar-collapse --> 

20. </div><! - - /.container-fluid --> 

21. </nav> 

22. <div id="containerConteudo" data-spy="scroll" data-target="#barraNavegacao"> 


23. 

<div id="portfolio"> 

... </div: 

24. 

<div id="naterias">.. 

. </div> 

25. 

<div id="contato"> .. 

. </div> 


26 </div> 

27. ... 

[.../c5/scrollspy-container.html] 

Nesse exemplo forgamento o aparecimento de uma barra de rolagem no container. 
Para isso acrescente a seguinte folha de estilo a pagina: 

• CSS 

<style type="text/css"> 

#containerConteudo { 
height: 400px; 
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overflow-y: scroll; 

} 

</style> 

Ao consultar esse arquiro clique os links da barra de navegagao e depois mo- 
vimente a barra de rolagem do container para cima e para baixo observando o 
plugin scrollspy em agao. 

5.2.4.3 Scrollspy com JavaScript nativo 

Na verdade, nas opgoes com uso de data-spy e com uso de JavaScript o mecanismo 
do plugin usa JavaScript. A diferenga e que para a primeira opgao sao os meca- 
nismos internos do Bootstrap que identificam os atributos da marcagao HTML 
e acionam os codigos JavaScript necessarios para fazer funcionar scrollspy e na 
opgao com JavaScript nativo o desenvolvedor precisa definir manualmente os 
metodos JavaScript proprios do Bootstrap para acionar a janela. 

O metodo nativo para inicializar scrollspy tern a sintaxe conforme mostrada a 
seguir. 

$('xpto 1 ).scrollspy(options) 

onde xpto identifica o container do elemento a monitorar a barra de rolagem. O 
escolha desse identificador, obviamente, e de livre escolha do autor. 


Existe uma opgao para esse metodo conforme descrita a seguir. 


Nome 

Tipo 

Default 

Descrigao 

offset 

numero 

10 

Retorna o valor em pixel da distancia ate o topo quando efetua-se o 
calculo da posigao da barra de rolagem. Importante notar que essa 
opcao nao define a distancia, ela apenas retorna a distancia. 


E previstos ainda o metodo conforme a sintaxe mostrada a seguir. 


$('xpto').spy('refresh') // Para insergoes dinamicas no DOM 

Esse metodo e util para atualizar o plugin quando ha insergao dinamica no 
DOM ja carregado. A sintaxe geral para aplicar o metodo em todos os scrollspy 
constantes da pagina e mostrada a seguir. 

$( 1 [data-spy="scroll"]').each(function () { 
var $spy = $(thls).scrollspy('refresh') 

}); 

O evento nativo e descrito a seguir. 
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Evento 

Descrigao 

activate 

Esse evento ocorre quando um novo link e ativado pelo scrollspy. 


A seguir mostraremos o mesmo exemplo constante do item [5.2.4.1] anterior para 
demonstrar o uso de JavaScript nativo para essa funcionalidade. 

• HTML 

<body> //retiranos os atributos data-* 

<!-- igual a narcagao do item [5.2.4.1] --> 

[.../c5/scrollspy-javascript.html] 

Notar que foram retirados os atributos data-* do elemento body. 

O codigo JavaScript e mostrado a seguir. 

• JavaScript 

<script type="text/javascript"> 

$('body').scrollspy( {target: '#barraNavegacao'} ).on('activate.bs.scrollspy', 
function () { 

alert('Foi ativado scrollspy 1 ); 

}); 

</script> 

</body> 

</html> 

Ao consultar esse arquivo clique os links da barra de navegagao e depois movi- 
mente a barra de rolagem da pagina para cima e para baixo observando o plugin 
scrollspy em agao. Observe o disparo do evento activate.bs.scrollspy toda vez que 
se clica um link na caixa de alerta JavaScript. 


5.2.5 Abas 

Abas e uma funcionalidade que permite ao autor criar um mecanismo de navegagao 
baseado em abas, ou seja, quando o usuario clica em um link contido em uma aba 
(ou em pill) o conteudo alvo do link e apresentado em uma area fixa na pagina. 

Existem duas maneiras de se projetar navegagao em abas: diretamente com uso do 
par atributo/valor data-toggle="tab" ou codiffcando com uso de metodos JavaScript 
previstos no Bootstrap. Veremos a seguir essas duas maneiras. 


Conhega os livros do Maujor: http://livrosdomaujor.com.br 





Capi'tulo 5 ■ Plugins 


179 


A criagao de abas e pills foi estudada em [4.6] onde mostramos como criar os 
diferentes tipos de aba e pill, mas sem acrescentar a funcionalidade da navegagao. 
Veremos a seguir abas em funcionamento. 

5.2.5.1 Abas com uso de data-toggle 

Para acionar o mecanismo de navegagao em abas basta declarar os atributos data- 
toggle="tab" para cada um dos elementos a que marcam os links das abas. 

Os mecanismos internos do Bootstrap identificam aquele atributo na marcagao 
e acionam os codigos JavaScript necessarios para fazer funcionar a navegagao 
em aba. O desenvolvedor nao precisa criar codigo JavaScript, eles sao criados 
automaticamente pelo Bootstrap. 

No exemplo a seguir mostraremos a criagao de uma aba de navegagao padrao. 

• HTML 

1. <body> 

2. <ul class="nav nav-tabs" role="tablist"> 

3. <li role="presentation" class="active"xa href="#hone" aria-controls="hone" 

role="tab" data-toggle="tab">Hone</a></li> 

4. <li role="presentation"xa href="#portfolio" aria-controls="portfolio" role="tab" 

data-toggle="tab">Portf61io</a></H> 

5. <li role="presentation"xa href="#artigos" aria-controls="artigos" role="tab" 

data-toggle="tab">Artigos</a></H> 

6. <li role="presentation"xa href="#contato" aria-controls="contato" role="tab" 

data-toggle="tab">Contato</a></U> 

7. </ul> 

8. <div class="tab-content"> 

9. <div role="tabpanel" class="tab-pane fade in active" id="hone"> 

11. <h4>Hone</h4> 

12. <p>Loren ipsum...</p> 

13. </div> 

14. <div role="tabpanel" ciass="tab-pane fade" id="portfolio"> 

15. <h4>Portfolio</h4> 

16. <p>Curabitur hendrerit..,</p> 

17. </div> 

19. <div role="tabpanel" dass="tab-pane fade" id="artigos"> 

20. <h4>Artigos</h4> 

21. <p>Pellentesque sapien...</p> 

22. </div> 
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19. <div role="tabpanel" class="tab-pane fade" id="contato"> 

20. <h4>Contato</h4> 

21. <p>Cum sociis natoque.. .</p> 

22. </div> 

23. </div> <!-- /.tab-content --> 

[.../c5/aba-data-toggle.html] 

Codigo comentado: 

Linha(s) Descri^ao 

Linhas 2 a 7 Links da aba. O atributo href do link tem como alvo o valor do id do 
container dos contetidos de cada aba. 

Linhas 8 e 23 Container de todo o conteudo a ser exibido nas abas. Esse container 
devera receber a classe tab-content. 

Linhas 9 a 22 Cada um dos contetidos de uma aba devera estar dentro de um container 

div ao qual atribui-se a classe tab-pane e o id com valor igual ao valor 
do atributo href (sem o sinal tralha) do link que mostra o conteudo. 
Notar as classes fade e in no container, elas se destinam a adicionar o 
efeito fade na abertura/fechamento das abas e a classe in deve serusada 
somente na aba inicialmente ativa. 


Dica: Os atributos role e aria-* constantes da marcagao sao usados para contemplar 
criterios de acessibilidade. 


Neste exemplo criamos uma folha de estilos incorporada ao arquivo com a finali- 
dade de personalizar as abas. A folha de estilos e mostrada e comentada a seguir. 

• CSS 

<style rel="stylesheet"> 
body { background: #ccc;} 
h2 {font-size:20px;} 

.tab-content { 

height: 250px; /* linitamos a altura da ara de nostra dos conteudos */ 

overflow-y:auto; /* barra de rolagen para conteudos que ocupen altura 
naior que o Unite 250px */ 
border: 3px solid #fff; 
border-botton-left-radius:5px; 
border-botton-right-radius:5px; 

} 

.tab-content h2 { nargin-top:3px; } /* sobrescrevenos a nargen padrao de h2 */ 

#hone,#portfolio,#artigos,#contato { 
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color: #fff; 
padding: 0 15px; 

} 

#hone { background: #333; } 

#portfolio { background: #930;} 

#artigos { background: #030;} 

#contato { background: #036;} 

.nav-tabs > li > a { /* crinos cor de fundo para os links nas abas */ 

background: #e0dbdb; 

} 

</style> 


5.2.5.2 Abas com JavaScript nativo 

Na verdade, nas opgoes com uso de data-toggle e com uso de JavaScript o mecanis- 
mo do plugin usa JavaScript. A diferenga e que para a primeira opgao sao os me- 
canismos internos do Bootstrap que identificam os atributos da marcagao HTML 
e acionam os codigos JavaScript necessarios para fazer funcionar a navegagao 
em abas e pills e na opgao com JavaScript nativo o desenvolvedor precisa definir 
manualmente os metodos JavaScript proprios do Bootstrap para acionar as abas. 

O metodo nativo para inicializar abas tern a sintaxe conforme mostrada a seguir. 

$( 1 a 1 ).tab( 1 show 1 ) 

onde a identifica o elemento link na navegagao da aba. Esses e o unico metodo 
deste plugin e se destina a mostrar e esconder os conteudos da abas. 


Os eventos nativos sao descritos a seguir. 


Evento 

Descrigao 

show.bs.tab 

Esse evento ocorre quando o usuario clica uma aba, mas o conteudo dela ainda naofoi mostrado. 

shown.bs.tab 

Esse evento ocorre quando o conteudo da aba clicada e mostrado. 

hide.bs.tab 

Esse evento ocorre antes de uma aba ser fechada em consequencia de o usuario ter clicado em 
outra aba. 

hidden.bs.tab 

Esse evento ocorre depois que uma aba foi fechada em consequencia de o usuario ter clicado em 
outra aba. 


Em todos estes eventos estao disponiveis as propriedades event. target e event. relatedTarget 
que retornam o URL da aba a ser aberta e o URL da aba ativa (a ser fechada). 

No exemplo a seguir usamos a mesma marcagao do exemplo mostrado no item 
anterior [5.2.5.1], retirando apenas o atributo data-toggle da marcagao HTML 
conforme mostrado a seguir. 
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• HTML 

1. <body> 

2. <ul class="nav nav-tabs" role="tablist"> 

3. <U role="presentation" class="actlve"xa href="#hone" aria-controls="hone" 

role="tab" data-toggle="tab">Hone</a></li> 

4. <11 role="presentation"><a href="#portfollo" arla-controls=''portfolio" role="tab" 

data-toggle="tab">Portf6lio</a></li> 

5. <11 role="presentatlon"xa href="#artigos" arla-controls="artlgos" role="tab" 

data-toggle="tab">Artlgos</a></ll> 

6. <11 role="presentation"xa href="#contato" arla-controls="contato" role="tab" 

data-toggle="tab">Contato</a></ll> 

7. </ul> 

8. a 22. <!-- Igual ao exenplo anterior --> 

23. </dlv> <!-- Igual a narcagao do Iten [5.2.5.1] --> 

[.../c5/abas-javascript.html] 

O codigo JavaScript e mostrado a seguir. 

• JavaScript 

<scrlpt type="text/javascript"> 

$('a[role="tab"]').on('click 1 , functlon(e) { 
e.preventDefault; 

$(this).tab('show'); 

}); 

$('a[role="tab"]').on('show.bs.tab', function (e) { 
var tabAbrlr = e.target // Abra a ser aberta 
var tabFechar = e.relatedTarget // Aba atlva a ser fechada 
alert('Aba: '+tabAbrlr+ ' val ser aberta\n\nAba: '+tabFechar+ ' val ser fechada\n\ 
nEvento: show.bs.tab'); 

}); 

</scrlpt> 

</body> 

</html> 

Ao consultar esse arquivo clique os links das abas. Observe a caixa de alerta 
JavaScript a cada clique em uma aba. 
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5.2.6 Tooltip 

No jargao do desenvolvimento web a palavra inglesa tooltip foi traduzida para 
o portugues como dica de contexto E aquela nossa conhecida funcionalidade que 
permite abrir uma pequena j anela popup, quando o usuario passa o mouse sobre 
uma palavra, contendo um texto explicativo, ou uma dica sobre a palavra. 

Existem duas maneiras de se projetar tooltip: diretamente com uso do par atri- 
buto/valor data-toggle="tooltip" ou codificando com uso de metodos JavaScript 
previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

5.2.6.1 Tooltip com uso de data-toggle 

Para criar um tooltip basta declarar o atributo data-toggle="tooltip" para o elemento 
HTML que devera ser o container da palavra que ira disparar o tooltip. O texto da 
tooltip sera o valor do atributo title daquele elemento. Observe a seguir a marcagao 
tipica para criar um tooltip em uma palavra de um texto corrente e em um botao. 

<a href="#" data-toggle="tooltip" title="Fruta tropical">Pupunha</a> 

<button type="button" class="btn btn-default" data-toggle="tooltip" 
title="Fruta tropical">Pupunha</button> 

Os mecanismos internos do Bootstrap identificam aquele atributo na marcagao 
e acionam os codigos JavaScript necessarios para fazer funcionar o tooltip. O de- 
senvolvedor nao precisa criar codigo JavaScript, eles sao criados automaticamente 
pelo Bootstrap. 

Por padrao o texto do tooltip e na cor branca, inserido em uma caixa na cor 
preta com bordas arredondadas e posicionado na parte superior da palavra que 
dispara o tooltip. 

E possivel alterar a posigao da caixa com uso do atributo data-placement e seus 
valores: top, right, bottom e left, sendo top o valor padrao. Mostramos a seguir as 
sintaxes para posicionamento. 

// padrao no topo 

<a href="#" data-toggle="tooltip" title="Fruta tropical">Pupunha</a> 

// a direita 

<a href=”#” data-toggle=”tooltip” data-placement="right" title=”Fruta tropical">Pupunha</a> 

// embaixo 

<a href=' J #” data-toggle=”tooltip” data-placenient="bottom" title=”Fruta tropical”>Pjpjnha</a> 
// a esquerda 

<a href=' J #” data-toggle=”tooltip” data-placepient="left" title=”Fruta tropical”>Pupunha</a> 
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No exemplo a seguir mostraremos a criagao de tooltips nas quatro posigoes 
possiveis. 

• HTML 

<p>As frutas de 

<a href="#" data-toggle="tooltip" title="nedia acina de 10°C...">clina tenperado</a> 
sao ... lenhosos ou 

<a href-'#" data-toggle="tooltip" data-placenent="left" 

title="plantas trepadeiras lenhosas">lianas</a>. 

Contudo elas nao ... 

As principals frutas de clina tenperado sao a 

<a href="#" data-toggle-'tooltip" data-placenent-'right" title="E un fruto ...">aneixa</a>, 
a aneixa-japonesa, a cereja-doce, o danasco, a 
<a href="#" data-toggle="tooltip" data-placenent="botton" 

title="None cientifico: Rubus idaeus">franboesa</a>, a naga_</p> 

/* Hais quatro exenplos con tooltips en botoes */ 

• JavaScript 

<script type="text/javascript"> 

$('[data-toggle="tooltip"] 1 ).tooltip(); 

</script> 

</body> 

</htnl> 

[.../c5/tooltip-alinhamento.html] 

O componente tooltip, mesmo quando criado com uso do atributo data-toggle 
precisa, obrigatoriamente, ser inicializado manualmente pelo desenvolvedor, 
conforme o codigo JavaScript mostrado, ou seja, devera ser declarado o metodo 
tooltipQ para o elemento que o dispara (no nosso exemplo [data - toggle="tooltip" ]). 

Ao visualizar este exemplo passe o mouse sobre as palavras em destaque (cor 
azul por padrao) no texto e sobre os botoes para ver o tooltip em agao nas suas 
quatro posigoes possiveis. 

5.2.6.2 Tooltip com JavaScript nativo 

Na verdade, nas opgoes com uso de data-toggle e com uso de JavaScript o meca- 
nismo do plugin usa JavaScript. A diferenga e que para a primeira opgao sao os 
mecanismos internos do Bootstrap que identificam os atributos da marcagao 
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HTMLe acionam os codigos JavaScript necessarios para fazer funcionar o tooltip 
e na opgao com JavaScript nativo o desenvolvedor precisa definir manualmente 
os metodos JavaScript proprios do Bootstrap para acionar o tooltip. 

O metodo nativo para inicializar um tooltip tem a sintaxe conforme mostrada 
a seguir. 

$( 1 seletor 1 ).tooltip(options) 

onde seletor e uma referenda ao elemento container da palavra que dispara o 
tooltip. 


As opgoes para esse metodo sao: 


Nome 

Tipo 

Default 

Descrigao 

animation 

boleano 

true 

Aplica o efeito fade ao mostrar/esconder o tooltip. 

html 

boleano 

false 

0 valor marcagio HTML define gue o conteudo do tooltip sera a 
marcagio HTML agui definida em lugar de texto simples. 

placement 

string ou 
fun^ao 

'top 1 

Define o posicionamento do tooltip em relagao a palavra 
gue o dispara. Os valores possiveis sao: top, right, bottom e 
left. Admite ainda a combinagio de auto com um dos quatro 
posicionamentos, por exemplo: 'auto left' que posiciona 
a esquerda quando ha espa^o a esquerda e a direita caso 
contrario. 

selector 

string 

false 

Essa opdo permite que se delegue a fungio de disparar o 
tooltip a um determinado seletor. Isso faz com que seletores 
inseridos no DOM dinamicamente herdem a funcionalidade 
tooltip. 

title 

string ou 
fun^ao 

i i 

Com uso dessa opgio podemos definir um texto padrao para 
o tooltip. Para visualizar o texto padrao e necessario que o 
atributo title nao seja definido no elemento container do 
tooltip. Se for definido, sobrescrevera o texto padrao. 

trigger 

string 

'hover focus' 

0 valor para essa opgio define o evento que dispara o tooltip. 

Os valores possiveis sao: click, hover, focus e manual. E admitido 
usar mais de um valor e nesse caso devem-se separar os valores 
com espagr. 0 valor manual nao pode ser combinado com outro 
valor. 

delay 

numeroou 

object 

0 

Define o tempo, em milissegundos, de retardo para abertura 
e fechamento do tooltip. Por exemplo, numero: delay: 200 ou 
objeto: delay: {show: 100, hide: 200}. Nao se aplica para a 
opgao trigger: "manual". 

container 

string ou 
false 

false 

Define um container ao qual o tooltip sera anexado. Por 
exemplo: container: '#janelaModal'. 
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Nome 

Tipo 

Default 

Descrigao 

template 

string 

'<div 

dass="tooltip" 

role="tooltip"> 

<div 

class="tooltip- 

arrow"> 

</div> 

<div 

class="tooltip- 

inner"> 

</divx/div>' 

Marca^ao HTML base a usar para criar um tooltip. 0 valor do 
atributo title sera injetado no elemento com a dasse tooltip- 
inner, a setinha sera injetada no elemento com a dasse tooltip- 
arrow. 0 container geral e no elemento com a dasse .tooltip. 

viewport 

string ou 
object ou 
function 

{selector: ’body’, 
padding: 0} 

Confina o tooltip aos limites do seu elemento. 


Sao previstos ainda os metodos conforme as sintaxes mostradas a seguir. 

$('seletor').tooltip( "show" ) // Mostra o tooltip 

$('seletor').tooltip( "hide" ) // Esconde o tooltip 

$('seletor').tooltip( "toggle" ) // Alterna nostra/esconde o tooltip 
$('seletor').tooltip( "destroy") // Esconde e destroi o tooltip 

Os eventos nativos sao descritos a seguir. 


Evento 

Descri^ao 

show.bs.tooltip 

Esse evento ocorre quando o usuario dispara o tooltip, mas o conteudo dele ainda 
naofoi mostrado. 

shown.bs.tooltip 

Esse evento ocorre quando o conteudo do tooltip e mostrado. 

hide.bs. tooltip 

Esse evento ocorre imediatamente antes de o tooltip ser fechado. 

hidden.bs. tooltip 

Esse evento ocorre depois que o tooltip foi fechado. 

inserted.bs.tooltip 

Esse evento ocorre depois do evento show.bs.tooltip quando o 
template do tooltip for adicionado ao DOM. 


O exemplo a seguir demonstra a criagao de tooltips acionados por JavaScript 
nativo, bem como o uso de algumas opgoes do metodo tooltipQ. 

• HTML 

<div class="row"> 

<div class="col-nd-6 um"> 

<h4>0pgoes:<br> 
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<p>A <a href="#">na?a</a> e una das principals frutas do clima tenperado.</p> 
</div> 

<div class=" col-nd-6 dois"> 

<h4>0pgoes:<br> 

<p>A <i>naga</i> e una das principals frutas do clina tenperado.</p> 

</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class=" col-nd-6 tres"> 

<h4>0pgoes:<br> 

<p>A <a href="#">na?a</a> e una das principals frutas do clina tenperado.</p> 

</di v 

<div class=" col-nd-6 quatro"> 

<h4>0pgoes:<br> 

<p>A <a href="#">naga</a> e una das principals frutas do clina tenperado.</p> 
</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class- 1 col-lg-12 "> 

<p><a href="#" class=''cinco">Clique aqui</a> para nostrar/esconder o segundo 
tooltip da pagina.</p> 

</div> <!-- /.col-lg-12 --> 

</div> <!-- /.row --> 

[.../c5/tooltip-javascript.html] 

Notar que nao ha necessidade de se usar atributos data-*. 

O codigo JavaScript e mostrado a seguir. 

• JavaScript 

<script type="text/javascript"> 

$( 1 .un a').tooltip( { 
trigger: 'click', 
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title: 'Contem vitaminas B1 e B12', 
placement: 'right' 

}); 

$('.dots i').tooltip( { 
html: true, 

title: '<img src="maca.jpg">', 
placement: 'top' 

}); 

$('.tres a').tooltip( { 
html: true, 

title: '<h3>Titulo do texto</h3><p>Paragrafo com o texto</p>', 
delay: { show: 500, hide: 1000 } 

}); 

$('.quatro a').tooltip( { 
html: true, 

title: '<img src="maca.jpg">', 
animation: false 

}); 

$('.cinco').on('click', function(event) { 
event.preventDefault(); 

$('.dots i').tooltip('toggle'); 

}); 

</script> 

</body> 

</html> 

Ao consultar esse arquivo passe o mouse (ou clique) a palavra maga em cada um 
dos quatro textos para verificar o disparo do tooltip. 


5.2.7 Popover 

Popover e uma funcionalidade semelhante ao tooltip. Destina-se a fornecer infor- 
magao adicional sobre uma determina palavra de um texto. Enquanto o tooltip 
e indicado para apresentar uma pequena dica informativa o popover destina-se 
a fornecer uma explicagao mais detalhada. 
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Existem duas maneiras de se projetar popover: diretamente com uso do par 
atributo/valor data-toggle="popover" ou codificando com uso de metodos JavaScript 
previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

5.2.7.1 Popover com uso de data-toggle 

Para criar um popover basta declarar o atributo data-toggle="popover" para o ele- 
mento HTMLque devera ser o container da palavra que ira disparar o popover. O 
titulo do popover sera o valor do atributo title e o texto do popover sera o valor 
do atributo data-content daquele elemento. Observe a seguir a marcagao tipica para 
criar um popover em uma palavra de um texto corrente e em um botao. 

<a href="#" data-toggle="popover" title="Informagoes nutricionais" 
data-content="0 consuno...">maga</a><button type="button" 
class="btn btn-default" data-toggle="popover" 

title-'Infornagoes nutricionais" data-content="0 consuno... ">maga </button> 

Os mecanismos internos do Bootstrap identificam os atributos data-* na marcagao 
e acionam os codigos JavaScript necessarios para fazer funcionar o popover. O 
desenvolvedor nao precisa criar codigo JavaScript, eles sao criados automatica- 
mente pelo Bootstrap. 

Por padrao o texto do popover e na cor preta, inserido em uma caixa na cor branca 
com uma barra cinza no topo para acomodar o titulo do popover, as bordas sao 
arredondadas e posicionada a direita da palavra que dispara o popover. 

E possivel alterar a posigao da caixa popover com uso do atributo data-placement e 
seus valores: top, right, bottom e left, sendo right o valor padrao. Mostramos a seguir 
as sintaxes para posicionamento. 

<a href="#" data-toggle="popover" title="Fruta tropical">naga</a> // padrao a direita 
<a href=”#” data-toggle=”popover” data-placement=‘‘top" ...>maga</a> //no topo 
<a href="#” data-toggle=”popover” data-placenent=“botton" ... >maga</a> // embaixo 
<a href=”#” data-toggle=”popover” data-placement="left" ...>maga</a> // a esquerda 

No exemplo a seguir mostraremos a criagao de popover nas quatro posigoes 
possiveis. 

• HTML 

<h4>Popover a direita</h4> 

<p>A <a href="#" data-toggle="popover" data-placenent="right" 
title="Informagoes nutricionais" 

data-content="0 consuno ,..">naga</a> e uma das principais frutas do clina temperado.</p> 
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<h4>Popover a direita</h4> 

<p>A <a href="#" data-toggle="popover" data-placenent="top" 
title="Infornagoes nutricionais" 

data-content="0 consuno ...">naga</a> e uma das principals frutas do clina tenperado.</p> 
<h4>Popover a direita</h4> 

<p>A <a href="#" data-toggle="popover" data-placepient="bottoni" 
title="Infornagoes nutricionais" 

data-content="0 consuno ...">naga</a> e una das principals frutas do clina tenperado.</p> 
<h4>Popover a direita</h4> 

<p>A <a href="#" data-toggle="popover" data-placenent="left" 
title="Infornagoes nutricionais" 

data-content="0 consuno ...">naga</a> e una das principals frutas do clina tenperado.</p> 
/* Mais quatro exenplos con popover en botoes */ 

• JavaScript 

<script type="text/javascript"> 

$( 1 [data-toggle="popover"]).popover(); 

</script> 

</body> 

</htnl> 

[.../c5/popover-data-toggle.html] 


Alerta: O funcionamento do componente popover requer a inclusao do plugins 
popover e tooltip. 


O componente popover, mesmo quando criado com uso do atributo data-toggle 
precisa, obrigatoriamente, ser inicializado manualmente pelo desenvolvedor, 
conforme o codigo JavaScript mostrado, ou seja, devera ser declarado o metodo 
popoverQ para o elemento que o dispara (no nosso exemplo [data-toggle="popover M ]). 

Ao visualizar este exemplo clique sobre a palavra maqa (cor azul por padrao) nos 
textos para ver o popover em aqao nas suas quatro posigoes posslveis. 

5.2.7.2 Popover com JavaScript nativo 

Na verdade, nas opqoes com uso de data-toggle e com uso de JavaScript o meca- 
nismo do plugin usa JavaScript. A diferenqa e que para a primeira opgao sao os 
mecanismos internos do Bootstrap que identificam os atributos da marcagao 
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HTML e acionam os codigos JavaScript necessarios para fazer f uncionar o popover 
e na opgao com JavaScript nativo o desenvolvedor precisa definir manualmente 
os metodos JavaScript proprios do Bootstrap para acionar o popover. 

O metodo nativo para inicializar um popover tem a sintaxe conforme mostrada 
a seguir. 

$( 1 seletor 1 ).popover(options) 

onde seletor e uma referenda ao elemento container da palavra que dispara o 
popover. 


As opgoes para esse metodo sao: 


Nome 

Tipo 

Default 

Descrigao 

animation 

boleano 

true 

Aplica o efeito fade ao mostrar/esconder o popover 

html 

boleano 

false 

0 valor marcagio HTML define gue o conteudo do 
popover sera a marcagio HTML agui definida em lugar 
de texto simples. 

placement 

string ou 
fun^ao 

'right' 

Define o posicionamento do popover em relagao a 
palavra gue o dispara. Os valores possiveis sao: top, 
right, bottom e left. Admite ainda a combinagio 
de auto com um dos guatro posicionamentos, por 
exemplo: 'auto left’ gue posiciona a esguerda quando 
ha espapr a esquerda e a direita caso contrario. 

selector 

string 

false 

Essa opdo permite que se delegue a fun^ao de disparar 
o popover a um determinado seletor. Isso faz com que 
seletores inseridos no DOM dinamicamente herdem a 
funcionalidade popover. 

title 

string ou 
fun^ao 

i i 

Com uso dessa opgio podemos definir um titulo 
padrao para o popover. Para visualizar o titulo padrao 
e necessario que o atributo title nao seja definido 
no elemento container do popover. Se for definido, 
sobrescrevera o titulo padrao. 

trigger 

string 

'dick' 

0 valor para essa op^ao define o evento que dispara 
o popover. Os valores possiveis sao: click, hover, focus 
e manual. E admitido usar mais de um valor e nesse 
caso devem-se separar os valores com espa^o. 0 valor 
manual nao pode ser combinado com outro valor. 

content 

string ou 
fungio 

r r 

Define o conteudo descritivo do popover desde que o 
atributo data-content nao tenha sido definido. 

delay 

numero 

ou 

object 

0 

Define o tempo, em milissegundos, de retardo para 
abertura e fechamento do popover. Por exemplo, 
numero: delay: 200 ou objeto: delay: {show: 100, hide: 
200}. Nao se aplica para a op^ao trigger: "manual". 
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Nome 

Tipo 

Default 

Descrigao 

container 

string ou 
false 

false 

Define um container ao gual o popover sera anexado. 

Por exemplo: container: '#janelaModal'. 

template 

string 

'<div class="popover" 
role=" popover "> 

<div class=" popover-arrow"> 
</div> 

<div dass=" popover-inner"> 
</divx/div>' 

Marcagao HTML base a usar para criar um popover. 

0 valor do atributo title sera injetado no elemento 
com a classe popover-inner, a setinha sera injetada 
no elemento com a classe popover-arrow. 0 container 
geral e no elemento com a classe .popover. 

viewport 

string ou 
object ou 
function 

{selector: ’body', 
padding: 0} 

Confina o popover aos limites do seu elemento. 


Sao previstos ainda os metodos conforme as sintaxes mostradas a seguir. 


$('seletor').popover( "show" ) // Mostra o popover 

$('seletor').popover( "hide" ) // Esconde o popover 

$('seletor').popover( "toggle" ) // Alterna nostra/esconde o popover 
$('seletor').popover( "destroy") // Esconde e destroi o popover 

Os eventos nativos sao descritos a seguir. 


Evento 

Descrigao 

show.bs.popover 

Esse evento ocorre guando o usuario dispara o popover, mas o conteudo 
dele ainda naofoi mostrado. 

shown.bs. popover 

Esse evento ocorre guando o conteudo do popover e mostrado. 

hide.bs. popover 

Esse evento ocorre imediatamente antes de o popover serfechado. 

hidden.bs. popover 

Esse evento ocorre depois gue o popover foi fechado. 

inserted.bs. popover 

Esse evento ocorre depois do evento show.bs.popover 
quando o template do popover for adicionado ao DOM. 


A criagao de popover com uso de JavaScript e identica a criagao de tooltip com 
uso de JavaScript como mostrado no exemplo do item [52.6.2 ]. Baseado naquele 
exemplo, sugerimos ao leitor, como exercicio, criar uma pagina exemplo para 
popover com JavaScript. 


5.2.8 Alerta 

Alerta e uma funcionalidade que permite ao desenvolvedor apresentar ao usuario 
uma caixa com mensagem de alerta. 

A marcagao tipica para criar uma caixa de alerta consta de um div container ao 
qual se atribui a classe alert. 
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Dentro desse div marca-se um elemento button do tipo button com a classe close, 
o par atributo/valor igual a data-dismiss="alert" e a seguir a marcagao do titulo e 
conteudo da mensagem. 

Essa marcagao, conforme mostrado a seguir, cria uma caixa de alerta padrao ou 
de alerta geral, renderizada em tons de amarelo. 

• HTML 

<div class="alert"> 

<button type="button" class="close" data-disnilss="alert">x</button> 

<h4>Alerta!</h4> 

<p>Voce ten certeza que deseja deletar o arquivo?</p> 

</div> 

Para fazer funcionar o alerta o desenvolvedor precisa definir manualmente os me- 
todos JavaScript proprios do Bootstrap. Ao contrario dos componentes estudados 
anteriormente nao ha disparo de alerta com uso de atributos data-*. 

O metodo nativo para inicializar um alerta tern a sintaxe conforme mostrada a seguir. 

$('seletor').alert() 

onde seletor e uma referenda ao elemento container do alerta. 

E previsto ainda o metodo conforme a sintaxe mostradas a seguir. 

$('seletor').alert("close") // fecha a caixa de alerta 
Os dois eventos nativos sao descritos a seguir. 


Evento 

Descri$ao 

dose.bs.alert 

Esse evento ocorre imediatamente apos a chamada do 
metodo alert com a instancia close. 

closed.bs.alert 

Esse evento ocorre ao final do fechamento da caixa de alerta (apos terem sido 
completadas as transigoes CSS). 


Para mais informagoes, uso e exemplos de caixas de alerta ver [4.14]. 


5.2.9 Botoes 

A estilizagao de botoes com uso de classes (CSS) foi estudada no capitulo 3 nos 
itens [3.5.1.2], [3.5.1.3], [3.5.1.4] e o agrupamento de botoes foi estudado no capitulo 4 
no item [4.3]. Neste item do capitulo 5 estudaremos a manipulagao de botoes 
com uso de JavaScript. 
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Sao previstos tres metodos para manipulagao de botoes conforme mostrados a 
seguir. 

$(.botaoN).button('toggle') // alterna o estado do botao - ativo/repouso 
$(.botaoN).button('reset 1 ) // retorna o botao ao estado repouso 

$(.botaoN).button('string') // altera o texto do botao 

onde .botaoN identifica o botao ao qual sera aplicado o metodo. 


Alerta: O metodo $('.botaoN).button(’loading") esta em desuso e sera retirado na 
versao BS4. 


No exemplo a seguir mostraremos a aplicagao destes tres metodos para manipu- 
laqao de botoes. 

• HTML 

<button type="button" id="botaoToggle" 

class="btn btn-default">Botao con button('toggle')</button> 

<button type="button" class="btn btn-default">Botao sen button('toggle')</button></div> 
<dlv ld="botaoReset"> 

<button type="button" class="btn btn-default">Padrao</button> 

<button type="button" class="btn btn-prinary">Prinario</button> 

<button type="button" class="btn btn-success''>Sucesso</button> 

<button type="button" class="btn btn-info">Infornagao</button> 

<button type="button" class="btn btn-warning">Atengao</button> 

<button type="button" class="btn btn-danger">Perlgo</button> 

</div> 

<button type="button" id="botaoString" class="btn btn-default" 

data-conplete-text="Carreganento teminou!>Padrao</button> 

• JavaScript 

<script type="text/javascript"> 

// Ao cllcar altera a aparencia do botao para clicado 
$("#botaoToggle").click(function(){ 

$(this).button('toggle'); 

}) 

I* Ao cllcar o texto do botao nuda para "loading" 
ao terninar o carreganento o texto volta ao valor inicial */ 

$("#botaoReset .btn").click(function(){ 
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$(this).button(’loading 1 ).delay(1000).queue(function(){ 

$(this).button ( 1 reset 1 ); 

$(this).dequeue(); 

}); 

}); 

/* Ao clicar o texto do botao nuda para "loading" ao terninar o carreganento o texto 
nuda para o valor do atributo data-complete-text (ver marcagao HTML) */ 

$("#botaoString").click(function(){ 

$(this) .button( ’ loading 1 ).delay( 1000).queue(function() { 

$(this).button ( 1 complete’); 

$(this).dequeue(); 

}); 

}); 

</script> 

</body> 

</html> 

[.../c5/botoes-javascript.html] 

Ao visualizar este exemplo clique os botoes para ver os metodos JavaScript em agao. 


5.2.10 Collapse 

Collapse e uma funcionalidade destinada a criar o efeito revelar/esconder para 
apresentagao de conteudos. 

Existem duas maneiras de se projetar este efeito: diretamente com uso do par 
atributo/valor data-toggle="collapse" ou codificando com uso de metodos JavaScript 
previstos no Boostrap. Veremos a seguir essas duas maneiras. 

5.2.10.1 Collapse com uso de data-toggle 

Para criar este efeito usa-se uma marcagao padrao com classes nativas do Bootstrap 
e a declaragao do atributo data-toggle="collapse" para um elemento a ou button que 
devera marcar o link que ira revelar/esconder os conteudos. 

Se for usado o elemento a, seu atributo href devera ter valor igual ao valor do id 
do container dos conteudos a revelar/esconder. 

Se for usado o elemento button ele devera receber o atributo data-target com valor 
igual ao valor do id do container dos conteudos a revelar/esconder. 
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Os mecanismos internos do Bootstrap identificam os atributos data-* e as classes 
definidas na marcagao e acionam os codigos JavaScript necessarios para fazer 
funcionar o efeito. O desenvolvedor nao precisa criar codigo JavaScript, eles sao 
criados automaticamente pelo Bootstrap. 

No exemplo a seguir mostraremos a criagao do efeito revelar/esconder simples 
acionado por um link ou por um botao e o uso deste efeito para criar um menu 
acordeao com tres links marcados com elementos a e ao qual atribuimos a 
classe="btn" fazendo com que os links fossem estilizados como um botao. 

A marcagao HTML para o exemplo e mostrada e comentada a seguir. 

• HTML 

// Exenplo de collapse sinples 

1. <a data-toggle="colapse" href="#colapseUn">Maga</a> 

2. <button class="btn btn-prinary" type="button" data-toggle="collapse" 

data-target="#colapseUn" aria-expanded="false">Maga</button> 

3. <div id-'colapseUn" class="collapse"> 

4. <div class="well"> 

5. <p><ing src="collapse-naca.jpg" alt="naga" class="pull-left">A naga..,</p> 

6. <small>Fonte: Wikipedia</small> 

7. </div> <!-- /. well --> 

8. </div> <!-- /#colapseUn --> 

// Exenplo de collapse para criar nenu acordeao 

13. <div class-'panel-group" id="accordion" role="tablist" aria-nultiselectable="true"> 

14. <div class="panel panel-default"> 

15. <div class="panel-heading" role="tab" id="headingLaranja"> 

16. <h4 class="panel-title"> 

17. <a class="btn btn-info" role="button" data-toggle="collapse" 

data-parent="#accordion" href="#collapseLaranja" aria-expanded="true" 
aria-controls="collapseLaranja">Laranja</a> 

18. </h4> 

19. </div> 

20. <div id="coUapseLaranja" class="panel-collapse collapse in" role="tabpanel" 

aria-labelledby="headingLaranja"> 

21. <div class="panel-body"> 

22. <p><ing src="collapse-laranja.jpg" alt="laranja" class="pull-left">A laranja 
e ..,</p><snall>Fonte: Wikipedia</snall> 

23. </div> 

24. </div> 
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25. </div> <!-- /.panel --> 

26. <div class="panel panel-default"> <!-- painel 2 --></div> <!-- /.panel --> 

27. <dlv class="panel panel-default"> <!-- palnel3 --></div> <!-- /.panel --> 

28. </div> <!-- /.panel-group --> 

[.../c5/collapse-data-toggle.html] 

Alerta: O funcionamento do componente collapse requer a inclusao do plugins 
collapse e transition. 


Codigo comentado: 


Linha(s) Descriqio 


Linhas 1 a 7 
Linha 1 


Linha 2 


Linhas 3 
Linhas 4 

Linhas 5 e 6 
Linhas 7 e 8 
Linhas 13 a 28 
Linha 13 


Linhas 14 a 25 


Linha 15 a 19 


Linha 16 a 18 


Marcagao de urn painel revelar/esconder simples. 

Link para acionar o efeito revela/esconde. O par atributo/valor data- 
toggle="collapse" e obrigatorio e o atributo href deve apontar para o id 
do container do conteudo a revelar/esconder (linha 3). 

Botao para acionar o efeito revelar/esconder. O par atributo/valor 
data-target="colapseUn" e obrigatorio e deve ser igual ao valor do id do 
container do conteudo a revelar/esconder (ver linha 3). 

Container geral para o conteudo a revelar/esconder. E obrigatorio 
definir, para esse container, a classe com valor collapse. 

Container que usa a classe well prevista no Bootstrap com a finalidade 
de criar e estilizar uma caixa com bordas arredondadas e cor de fundo 
(ver componente Well em [4.20]). 

Conteudo a revelar/esconder. 

Tags de fechamento dos containeres well e geral. 

Marcagao de tres paineis revelar/esconder para criar o menu acordeao. 
Container geral do menu que devera, obrigatoriamente, receber a classe 
panel-group e um id de livre escolha. O valor do id sera igual ao valor do 
atributo data-parent marcado em cada um dos links (ou botoes) que 
acionam o efeito revelar/esconder. (ver linha 17) 

Container geral do primeiro painel que compoe o menu. Nas linhas 
26 e 27 encontram-se os outros dois paineis cuja marcagao HTML foi 
omitida por ser semelhante a deste primeiro painel. 

Container geral do link ou botao destinado a revelar/esconder o con¬ 
teudo de cada painel. Notar que o valor do atributo id deste container 
devera ser igual ao valor do atributo aria-labelledby do container geral 
do cojnteudo a revelar/esconder (ver linha 20). 

Elemento h4 container do link para revelar/esconder. 
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Linha(s) Descri^ao (cont.) 

Linha 17 Container do link que aciona o revelar/esconder. O atributo href deste 

link aponta para o id do container geral do conteudo a revelar/esconder 
(ver linha 20). 

Linhas 20 a 24 Container geral do conteudo a revelar/esconder. A classe in neste con¬ 
tainer destina-se a fazer com que este conteudo seja apresentado a vista 
(revelado ou aberto) quando a pagina for carregada. 

Linhas 21 a 23 Container corpo dos conteudos a revelar/esconder. Notar que neste 
container pode-se inserir qualquer tipo da marcagao HTML e no nosso 
exemplo mostramos uma imagem em cada painel, alem de textos. 


5.2.10.2 Collapse com JavaScript nativo 

Na verdade, nas opgoes com uso de data-* e com uso de JavaScript o mecanismo do 
plugin usa JavaScript. A diferenga e que para a primeira opgao sao os mecanismos 
internos do Bootstrap que identificam os atributos da marcagao HTMLe acionam 
os codigos JavaScript necessarios para fazer funcionar o efeito revelar/esconder e 
na opgao com JavaScript nativo o desenvolvedor precisa definir manualmente os 
metodos JavaScript proprios do Bootstrap para acionar o accordion. 

O metodo nativo para inicializar o efeito tern a sintaxe conforme mostrada a seguir. 

$( 1 seletor').collapse() 

onde seletor e uma referenda ao elemento container do conteudo a revelar/es¬ 
conder. 

As opgoes para esse metodo sao: 


Nome 

Tipo 

Default 

Descrigao 

parent 

selector 

false 

Define o elemento-pai para o efeito revelar/esconder. 

toggle 

boleano 

true 

Altera a visibilidade do conteudo guando acionado. 


Sao previstos ainda os metodos conforme as sintaxes mostradas a seguir. 

$('seletor').collapse( "show") // revela o conteudo 
$('seletor').collapse! "hide") // esconde o conteudo 
$('seletor').collapse("toggle") // alterna revelar/esconder o conteudo 
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Os quatro eventos nativos sao descritos a seguir. 


Evento 

Descrigao 

show.bs.collapse 

Esse evento ocorre imediatamente apos a chamada do metodo collapse com a instancia 
show. 

shown.bs.collapse 

Esse evento ocorre ao final da abertura de um conteudo (apos terem sido completadas as 
transigoes CSS). 

hide.bs.collapse 

Esse evento ocorre imediatamente apos a chamada do metodo hide(). 

hedden.bs.collapse 

Esse evento ocorre ao final do fechamento de um conteudo (apos terem sido completadas 
as transigoes CSS). 


A obtengao do efeito revelar/esconder com uso de JavaScript e identica a criagao 
de tooltip com uso de JavaScript como mostrado no exemplo do item [52.6.2]. 
Baseado naquele exemplo, sugerimos ao leitor, como exercicio, criar uma pagina 
exemplo para o efeiot revelar/esconder com JavaScript. 


5.2.11 Carousel 

Carousel e uma funcionalidade que se destina a criar um slideshow acionado 
com uso de um efeito semelhante a um carrossel. 

Existem duas maneiras de se projetar o efeito carrossel: diretamente com uso 
de marcagao padrao e de atributos classe e data-ride ou codificando com uso de 
metodos JavaScript previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

Todas as imagens a serem mostradas no slideshow carrossel devem ter as mesmas 
dimensoes (largura x altura). A largura devera ser igual ou maior a maior largura 
assumida pelo container do carrossel e a altura e de livre escolha do autor, isto e, 
o Bootstrap nao estabelece uma razao de aspecto para as imagens. 

Por exemplo: se o carrossel foi projetado para ocupar toda a largura de uma linha 
(div. row) as imagens deverao ter uma largura total igual (ou maior) do que 1170px 
pois esta e a maior largura de uma linha para resolugoes acima de 1200px que e o 
maior breakpoint do Bootstrap. Se o carrossel foi projetado para ocupar a metade 
de uma linha a largura das imagens devera ser igual a largura correspondente 
a uniao de seis colunas adjacentes (aproximadamente 600px), pois uma linha 
content 12 colunas. 
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5.2.11.1 Carousel com uso de data-ride 

Para criar o efeito carrossel em um slideshow usa-se uma marcagao padrao com 
classes nativas do Bootstrap e a declaragao do atributoo data-ride e de classes. 

Os mecanismos internos do Bootstrap identificam os atributos e as classes defini- 
das na marcagao e acionam os codigos JavaScript necessarios para fazer funcionar 
o carrossel. O desenvolvedor nao precisa criar codigo JavaScript, eles sao criados 
automaticamente pelo Bootstrap. 

No exemplo a seguir mostraremos a criagao de um slideshow com uso do plugin 
Carousel. 

• HTML 

1. <div id-'meuCarrossel" class="carousel slide" data-ride="carousel"> 

2. <ol class="carousel-indicators"> <!-- "Bolinhas" da navegagao pelos slides --> 

3. <li data-target="#neuCarrossel" data-slide-to="0 n class="active"></li> 

4. <li data-target="#neuCarrossel" data-slide-to="l"x/U> 

5. <!-- nais tres indicadores --> 

6. <li data-target="#neuCarrossel" data-slide-to="5"></li> 

7. </ol> 

8. <div class="carousel-inner" role="listbox"> <!-- Container dos slides --> 

9. <div class="iten active"> 

10. <img src="cl.jpg" alt=""> 

11. <div class="carousel-caption"> 

12. <h4>Slide l</h4> 

13. <p>Lorem ipsun dolor sit anet, consectetuer adipiscing elit.</p> 

14. </div> 

14. </div> 

15. <div class="iten"> 

16. <img src="c2.jpg" alt=""> 

17. <div class="carousel-caption"> 

18. <h4>Legenda 2</h4> 

19. <p>Curabitur hendrerit erat ut augue. Cras gravida.</p> 

20. </div> 

21. </div> 

22. <div class="iten"> 

23. <!-- seguen nais quatro slides --> 

22. </div> 

23. </div> <!-- /.carousel-inner --> 
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24. <a class="left carousel-control" href="#neuCarrossel" data-slide="prev" role="button"> 
<span class="glyphicon glyphicon-chevron-left" aria-hldden="true"></span> 

<span class="sr-only">Anterior</spanx/a> 

25. <a class="right carousel-control" href="#rieuCarrossel" data-sltde="next" 

role="button" > 

<span class="glyphtcon glyphicon-chevron-right" aria-hidden="true"x/span> 

<span class="sr-only">Proxino</span> 

</a> 

26. </div> <!-- /#meuCarrossel --> 


[.../c5/carrossel-data-ride.html] 

Codigo comentado: 


Linha(s) Descri^ao 


Linhas 1 e 26 


Linhas 2 a 7 


Linhas 8 e 23 
Linhas 9 e 14 


Linhas 11 e 14 
Linhas 24 e 25 


Container geral do carrossel. Devera receber a classe de estilizagao 
prevista no Bootstrap denominada carousel. Adicionalmente declare 
a classe slide para permitir a transigao dos slides com o efeito de mo- 
vimentar lateralmente. Se essa classe nao for definida a transigao sera 
abrupta. Definir tambem o atributo id com valor de livre escolha do 
autor. Esse valor servira de referenda para definir o valor do atributo 
data-target conforme mostrado nas linhas 3 a 6 e tambem sera o valor 
do atributo target dos links ‘Anterior” e “Proximo” (ver linhas 24 e 25). 
No nosso exemplo escolhemos o valor id="meuCarrossel" para o container 
geral do carrossel (ver linha 1). 

Lista destinada a criar os indicadores de imagern ativa (as bolinhas 
de navegagao pelas imagens). O quantidade de itens It nesta lista e 
igual a quantidade de slides. Na marcagao desta lista definir, tal como 
mostrado na marcagao, os atributos class, data-target e data-slide-to. 
O valor do atributo data-slide-to devera ser uma sequencia numerica 
iniciando em zero. 

Container interno para o carrossel. Definir a classe carousel-inner. 

Container para cada imagem e sua legenda. Definir a classe item e a 
classe active para determinar a primeira imagem a aparecer no carrossel 
(imagem de capa). 

Container geral para a legenda da imagem. Definir, para esse container, 
a classe carousel-caption. 

Cria as setas para manualmente acionar o carrossel para a esquerda 
ou direita. 


Na marcagao HTML que demonstra este exemplo uma folha de estilos incorpo- 
rada com apenas duas regras de estilos como mostrada a seguir foi comentada. 
Estas regras de estilos criam um efeito na legenda dos slides. Para visualizar o 
efeito, descomente as regras. 
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• CSS 

<style rel="stylesheet"> 
h2 {font-size:20px;} 
.carousel-caption { 
bottom: 0; 
right: 0; 
left: 0; 

padding: 0 5px 30px 5px; 
background: rgba(0,0,0,.6); 

} 

.carousel-indicators { bottom: 0; } 
</style> 


5.2.11.2 Carousel com JavaScript nativo 

Na verdade, nas opgoes com uso de marcagao padrao e com uso de JavaScript o 
mecanismo do plugin usa JavaScript. Adiferenga e que para a primeira opgao sao 
os mecanismos internos do Bootstrap que identificam os atributos da marcagao 
HTMLe acionam os codigos JavaScript necessarios para fazer funcionar o carrossel 
e na opgao com JavaScript nativo o desenvolvedor precisa definir manualmente 
os metodos JavaScript proprios do Bootstrap para acionar o carrossel. 

O metodo nativo para inicializar um carrossel tem a sintaxe conforme mostrada 
a seguir. 

$('seletor').carousel() 

onde seletor e uma referenda ao elemento container do carrossel. 


As opgoes para esse metodo sao: 


Nome 

Tipo 

Default 

Descrigao 

interval 

numero 

5000 

Tempo de espera em milissegundos para haver a transigao 
automatica para a proxima imagem. Definir o valor false para 
essa opgao interrompe a transigao automatica. 

pause 

string 

'hover' 

Agio do usuario necessaria para pausar o slideshow. A agio 
padrao ('hover') e colocar o mouse sobre a imagem para pausar e 
retirar o mouse para continuar. 

wrap 

boleano 

'true' 

Define se a movimentagao dos slides sera infinita ou apenas um 
cidoeparar. 

keybord 

boleano 

'true’ 

Define se os comandos avangar/recuar dos slides serao ou nao 
controlados pelas setas do tedado. 
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$('seletor').carousel( "cycle")// movimenta os slides da esquerda para a direita 
$('seletor').carousel( "pause")// pausa o movimento dos slides 

$('seletor').carousel(nunber) // movimenta os slides para o slide number (0,1,2,3 etc.) 
$('seletor').carousel("prev") // novimenta para o slide anterior ao atual 
$('seletor').carousel("next") // novimenta para o slide posterior ao atual 

Os dois eventos nativos sao descritos a seguir. 


Evento 

Descrigao 

slide.bs.carousel 

Esse evento ocorre no inicio da movimentagao dos slides. 

slid.bs.carousel 

Esse evento ocorre ao final da transigao do slide. 


Nestes dois eventos estao disponiveis as propriedades direction e event.relatedTarget 
que retornam a diregao de movimentagao (left ou right) e o elemento, respecti- 
vamente, do slide que se tornou ativo. 

No exemplo a seguir usamos a mesma marcagao do exemplo mostrado no item 
anterior [5.2.11.1], retirando apenas o atributo data-ride da marcagao HTMLe cria- 
mos comandos para o slideshow usando algumas das funcionalidades JavaScript 
aqui estudadas. O script constante do exemplo e mostrado a seguir. 

• JavaScript 

<script type="text/javascript"> 

$('#neuCarrossel').carousel( 

{ 

interval: 500, 
wrap: false, 
keyboard: false 

}); 

$('#meuCarrossel').on('slide.bs.carousel', function () { 
console.log( 1 Inicio da movimentagao do slide'); 

}) 

$('#meuCarrossel').on('slid.bs.carousel', function () { 
console.log('Fin da movimentagao do slide'); 

}); 

</script> 

[.../c5/carrossel-javascript.html] 
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Sugerimos ao leitor, como exercicio, criar uma copia do arquivo deste exemplo e 
explorar as demais funcionalidades JavaScript para o plugin carousel escrevendo 
seus proprios scripts. 


5.2.12 Affix 

Affix e uma funcionalidade destinada a manter um container fixo em uma posigao 
na pagina, ou seja, se o usuario aciona a barra de rolagem da pagina o container 
nao se movimenta. 

Existem duas maneiras de se projetar o efeito affix: diretamente com uso de 
marcagao padrao e de atributos data-spy ou codificando com uso de metodos 
JavaScript previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

5.2.12.1 Affix com uso de data-spy 

Para criar o efeito affix usa-se uma marcagao padrao com declaragao do atributos 
data-spy. 

Os mecanismos internos do Bootstrap identificam os atributos definidos na mar¬ 
cagao e acionam os codigos JavaScript necessarios para manter o container fixo 
na pagina. O desenvolvedor nao precisa criar codigo JavaScript, eles sao criados 
automaticamente pelo Bootstrap. 

No exemplo a seguir mostraremos a criagao de um menu fixo na tela com uso 
da funcionalidade affix. 

• HTML 

<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="265"> 

<U><a href="#tp">Topo</a></li> 

<U><a href="#un">Link l</a></li> 

<U><a href="#dois">Link 2</a></li> 

<li><a href="#tres">Link 3</a></li> 

<H><a href="#quatro">Link 4</a></li> 

<li><a href="#cinco">Link 5</a></li> 

</ul> 

<h2 id="um">Link l</h2> 

<p>Loren ipsun..,</p> 

<h2 id="dois">Link 2</h2> 

<p>Pellentesque sapien...</p> 
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<h2 id="tres">Link 3</h2> 

<p>Nulla facilisi..,</p> 

<h2 id="quatro">Link 4</h2> 

<p>Curabitur hendrerit...</p> 

<h2 id="cinco">Link 5</h2> 

<p>Cum sociis natoque...</p> 

[.../c5/affix-data-spy.html] 

Definimos o atributo data-spy="affix" para o container do elemento a manter fixo 
na pagina (no nosso exemplo o menu) e o atributo data-offset-top que define a 
quantidade de pixels a rolar a partir da qual o container sera mantido fixo na 
sua posigao original. 

Pode-se usar qualquer tipo de dispositivo de navegagao, previsto ou nao no Boots¬ 
trap, contudo essa funcionalidade nao tem uma estilizagao padrao nativa. O autor 
devera criar uma folha de estilos conforme suas necessidades. Neste exemplo a 
folha de estilos esta incorporada a marcagao da pagina. 

Consulte o exemplo, verifique o funcionamento e depois comente a folha de 
estilos voltando a verificar o funcionamento. 

5.2.12.2 Affix com JavaScript nativo 

Na verdade, nas opgoes com uso de marcagao padrao e com uso de JavaScript o 
mecanismo do plugin usa JavaScript. Adiferenga e que para a primeira opgao sao 
os mecanismos internos do Bootstrap que identificam os atributos da marcagao 
HTML e acionam os codigos JavaScript necessarios para tornar o container fixo 
e na opgao com JavaScript nativo o desenvolvedor precisa definir manualmente 
os metodos JavaScript proprios do Bootstrap para fixar o container. 

O metodo nativo para inicializar um affix tem a sintaxe conforme mostrada a 
seguir. 


$( 1 seletor 1 ). affix() 

onde seletor e uma referenda ao elemento container a manter fixo. 
A duas opgoes para esse metodo e: 


Nome 

Tipo 

Default 

Descrigao 

offset 

numero oufungaoou 
objeto 

10 

Define a posigao, em numero de pixels, do container 
(no nosso exemplo um menu) fixo em relagao ao topo 
da tela. As coordenadas sao top, right, bottom e left. 

Por exemplo: offset: {top:20}. 
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Nome 

Tipo 

Default 

Descriqao 

target 

seletorounoou 
elemento jQuery 

0 objeto window 

Define o elemento em relagao ao qual o container (no 
nosso exemplo um menu) sera fixo. 


No exemplo a seguir usamos a mesma marcagao do exemplo mostrado no item 
anterior [5.2.12.1], retirando apenas os atributos data-spy e data-offset da marcagao 
HTML e criamos comandos para o acionar o affix usando algumas das funcio- 
nalidades JavaScript aquiestudadas.Aretirada dos atributos da marcagao HTML 
e o script constante do exemplo e mostrado a seguir. 

• HTML 

<ul class=''nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="265"> 

Nessa opgao nao se usam os atributos data-*. 

• JavaScript 

<script type="text/javascript"> 

var offset = $('.nav').position!).top; 

$(' .nav').affix({ 
offset: offset 

}); 

</script> 

[.../c5/affix-javascript.html] 

Notar que com uso de JavaScript podemos inspecionar dinamicamente as coorde- 
nadas do container (no nosso exemplo um menu), com uso do metodo position!) 
da jQuery, e defini-la com uso da opgao offset. 
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CAPI'TULO 6 

Criando um layout com Bootstrap 


Neste capitulo, iremos aplicar as funcionalidades do framework para criar um 
layout a partir da imagem fornecida pelo designer do site. 


6.1 Introdu^ao 

E quase certo que as regras-padrao de estilizagao previstas na folha de estilo do 
Bootstrap nao sejam adequadas ao design do site que voce pretende desenvolver. 
Existem tres opgoes basicas de personalizar a folha de estilo do Bootstrap para 
atender as necessidades especificas de um projeto. 

A primeira opgao e fazer o download personalizado no site do Bootstrap em 
http://getbootstrap.com, a segunda e alterando as variaveis LESS de acordo com 
suas necessidades e a terceira opgao e fazer o download completo do framework 
Bootstrap (foi a opgao que adotamos para criar os exemplos deste livro) e proje- 
tar uma folha de estilo personalizada para as necessidades do projeto, conforme 
mencionamos no item 1.3, quando dissemos que era sugerido que essa folha de 
estilo fosse nomeada como custom.css .Tal folha devera ser vinculada ao documento 
depois da folha de estilos do Bootstrap, conforme mostrado a seguir. 


<title>Tltulo da pagina</title> 

<Unk rel="stylesheet" href="css/bootatrap.min.css"> 

<link rel="stylesheet" href="css/custon.css"> 


A ffnalidade desta folha de estilo e a de sobrescrever os estilos-padrao do Bootstrap, 
adaptando-os as necessidades do projeto. Veja o exemplo a seguir. 
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Vimos no item 3.1 que a marcagao HTML para criar um botao e a mostrada a seguir. 


<button type=”button” class="btn btn-default">Botao basico</button> 

Esta marcagao cria um botao basico que e renderizado com cor de fundo branca, 
borda cinza arredondada e texto na cor preta. No estado hover a cor de fundo 
do botao e cinza. Abrindo a folha de estilos bootstrap, css localizada na pasta css 
do Bootstrap em editor de texto e nela localizando os seletores .btn e . btn -default 
encontramos as declaragoes CSS que criam (estilizam) o botao basico. No trecho 
de codigo a seguir, retirado daquela folha de estilo, mostramos as regras CSS para 
aqueles seletores. 

.btn { 

display: inline-block; 
padding: 6px 12px; 
font-size: 14px; 
background-image: none; 
border: lpx solid transparent; 
border-radius: 4px; 

/* mais declaragoes CSS */ 

} 

.btn-default { 
color: #333; 
background-color: #fff; 
border-color: #ccc; 

} 

Conforme estudado neste livro, sabemos que existem varias classe nativas desti- 
nadas a estilizar os botoes em diferentes cores e dimensoes. 

Suponha que no seu projeto os botoes basicos foram deffnidos pelo designer com 
a cor de fundo preta (black), a cor do texto verde (lime) e borda na cor vermelha 
(red) com cantos vivos. 

Neste caso, para personalizar os botoes, basta que voce declare, no arquivo custom, 
css, regras CSS para atender aquela estilizagao, conforme mostrado a seguir. 

.btn-default { 

color: lime; 

background-color: black; 

border-color:red; 

border-radius:0; 

} 
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Assim, voce criou um conflito de regras CSS contidas em dois arquivos separa- 
dos servidos a mesma pagina. Resolve-se conflito de regras CSS aplicando-se os 
criterios da especificidade e do efeito cascata respectivamente, ou seja, vence a 
regra mais especifica, e se houver empate, como e o caso do nosso exemplo, vence 
o efeito cascata. 

Como lincamos a pagina o arquivo app.css depois do arquivo bootstrap.min.css, a 
regra contida naquele arquivo e a vencedora e o botao basico tera uma estilizagao 
personalizada. 

Consulte o arquivo [.../c6/botao-basico-personalizado.html] para verificar essa per- 
sonalizagao do botao basico. 

Neste capitulo, iremos criar um layout personalizando com uso de uma folha de 
estilos do tipo custom.css\ contudo, para facilitar o estudo, a folha de estilo sera 
incorporada na segao head da pagina e nao lincada, como deve ser em um caso real. 

Uma ferramenta indispensavel para criagao de uma folha de estilos personalizada 
e o console do navegador, que podera ser instalado como complemento, como 
e o caso do Firebug, ou ser nativo do navegador, como e o caso da maioria dos 
navegadores modernos. Nao e do escopo deste livro ensinar o uso de consoles de 
navegador, mas o leitor necessariamente devera saber usar pelo menos os paineis 
de inspegao e edigao do HTML e das CSS integrantes do console. 


Dica: O Zeno Rocha criou videos no YouTube que ensinam de forma bem didatica 
como usar o console do navegador. Assista os videos em http://kwz.me/JR. 


O console do navegador mostra ao autor quais sao as regras CSS constantes da 
folha de estilo do Bootstrap aplicadas em determinado elemento da marcagao 
HTML e consequentemente qual seletor usar na personalizagao. 

6.2 Layout iMasters 

Para ilustrar este capitulo, usaremos parte do layout da Home Page do iMasters 
(. http://kwz.me/vZ ) com o aspecto que ela apresentava ha um tempo atras e que 
pode ser visualizada na figura 6.1. 

Note na figura que a largura maxima de alguns conteudos da pagina e fixa (940px) 
e que a cor de fundo de algumas barras do layout ocupam 100% da janela do 
navegador. 
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Figura 6.1 - Home page iMasters (parte). 

Consideramos para o proposito deste capitulo interromper o layout no final da 
barra superior das noticias como mostrado na figura. Trata-se apenas do inicio 
do layout, mas apresenta uma configuragao compativel e suficiente para cumprir 
os objetivos deste capitulo. Fica como sugestao ao leitor, a titulo de exercicio e 
fixagao dos seus estudos, criar as partes do layout abaixo da barra de noticias. 

Todas as imagens do layout estao disponiveis na pasta imagens que se encontra 
dentro da pasta imasters no diretorio c6 na pasta do download dos arquivos de 
exemplos deste livro. 

Antes de prosseguir, consulte o arquivo [...Ic6limasterslimasters.html] e visualize a 
home page completa do site do iMasters, da qual foi extraida a imagem mostrada 
na figura 6.1 e que servira de base para as tecnicas estudadas neste capitulo. 

Conforme estudamos no item [3.1], o Bootstrap preve um sistema de grid para 
construgao de layout que por padrao se estende ate uma largura maxima igual a 
1170px em larguras de viewport maiores do que 1200px. O espagamento entre cada 
coluna e obtido com a definigao de um padding lateral (a esquerda e a direita) igual a 
15px, resultando em um espagamento entre colunas igual a 30px. Assim, somados 
o padding lateral esquerdo da primeira coluna e o padding lateral direito da ultima 
coluna, a largura maxima para o conteudo do layout e de 1170px - 30px = 1140px. 
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Afigura 6.2 apresenta um esquema mostrando as dimensoes horizontais do grid- 
-padrao, conforme descrito. 


. -padding = 15px-— 

-padding = -- 

-padding -- 

! ! 

! !. 

! _ | 

i i 

i_i 

i i 

i-1 

i i 

i_i 

^-i-1-1-1-1- 

i ii ii i 




Figura 6.2 - Esquema do grid-padrao. 

E facil personalizar a largura de um layout para diferentes breakpoints, pois, 
conforme estudamos no item 3.1.1 uma aplicagao desenvolvida com Bootstrap 
devera estar contida em um elemento container geral que recebe a classe de 
nome container. E esse container que define a largura maxima do layout para os 
diferentes breakpoints. 

Inspecionando a folha de estilos do Bootstrap, encontramos as seguintes regras 
CSS para o seletor de classe .container. 

@nedia (min-width: 768px) { 

.container { 
width: 750px; 

} 

} 

@nedia (min-width: 992px) { 

.container { 
width: 970px; 

} 

} 

@nedia (nin-width: 1200px) { 

.container { 
width: 1170px; 

} 

} 

Entao, para definir uma largura de conteudo maxima para o layout igual a 940px 
(largura maxima do layout do iMasters), basta criar a seguinte regras CSS na folha 
de estilos personalizada da nossa aplicagao. 
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©media (min-width: 1200px) { 

.container { 

width: 970px; /* 970px - 30px = 940px */ 

} 

} 


Alerta: Em nosso exemplo, nao iremos alterar a largura maxima do layout para 
940px como e a largura do site do iMasters, pois nao existe qualquer prejuizo 
em se adotar a largura maxima padrao do Bootstrap que e de 1130px. 


Por razoes didaticas, vamos mostrar a criagao do layout por etapas, conforme 
descritas nos itens que se seguem. 


6.2.1 Primeira etapa: navegagao superior 

O template para o desenvolvimento do layout e conforme estudamos no item [1.4], 
contudo por tratar-se de personalizagao nao usaremos o arquivo bootstrap-themexss. 

No topo do layout existe um mecanismo de navegagao constante de links para 
segoes do site, links para redes sociais em forma de icones e link para login e 
cadastre. Na parte superior deste mecanismo de navegagao existe uma barrinha 
superior decorativa com tres segoes em cores diferentes. Note que a cor de fundo 
da pagina e cinza-clara. 

A barrinha superior decorativa sera construida com uso de um elemento div com 
a classe barrinha-superior ao qual sera aplicada uma cor de fundo constituida por 
um gradiente CSS, conforme os codigos mostrados a seguir. 

• HTML 

<body> 

<div class="container"> 

<div class-'barrinha-superior"x/div> 


Notar que nao ha necessidade de se criar uma linha (<div class="row">...</div>) 
para insergao da barrinha superior, ela pode ser elemento-filho do container 
geral div.container. 
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body { background: #f5f5f5; } /* * cor de fundo da pagina */ 

.barrinha-superior { 
height: 4px; 

background: #369caf; /* fallback para navegadores que nao suportam gradientes */ 
background-image: linear-gradient( to right, #369caf 33.33%, #e37900 33.33%, 
#e37900 66.66%, #af2d22 66.66%, #af2d22 ); 

/* use a mesma declaragao com uso de prefixos proprietaries se for o caso */ 


Alerta: Notar que embora a barrinha superior seja constituida por tres faixas 
sequenciais de cores solidas diferentes as funcionalidades dos gradientes CSS 
possibilitam a obter aquele efeito. 


Para criar o mecanismo de navegaqao superior, usaremos o componente do Boots¬ 
trap denominado barra de navegaqao basica estudada no item [4.7.1], e marcada 
conforme o codigo mostrado a seguir. 

• HTML 

<div class=”row”> 

<div class="col-md-12"> 

<nav class="navbar navbar-default" id="nav-superior"> 

<div class="navbar-header"> 

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#barraSuperior"> 

<span class="sr-only">Toggle navigation</span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

</button> 

<a class="navbar-brand hidden-lg hidden-md hidden-sm" href="#" 
data-toggle="collapse" data-target="#barraSuperior">Menu</a> 

</div> 

<div class="collapse navbar-collapse" id="barraSuperior"> 

<ul class="nav navbar-nav"> 

<li><a href="#"><img src="imagens/icon-navsup.png" alt="logotipo do site"x/ax/li> 
<li><a href="#">Portal</a></li> 

<!-- mais sete itens --> 

</ul> 
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<ul class="nav navbar-nav navbar-right"> 

<li><a href="#" title="facebook"><ing src-'tnagens/facebook.png" 
alt="facebook"x/a></li> 

<!-- mats cinco itens --> 

<lixa href="#">Faga Login / Cadastre-se</a></li> 

</ul> 

</div><!- - /.navbar-collapse --> 

</nav> 

</div> 

</div> <!-- /.row --> 


Alerta: Notar que para o container geral da barra de navegagao definimos o de 
nossa escolha (nao padrao do Bootstrap) id="nav-superior". Fizemos isso para 
diferenciar da outra barra de navegagao que existe no layout, como veremos 
adiante. 


[.../c6/imasters1.html] 

Nesta etapa, a barrinha de topo estara estilizada e a barra de navegagao sera 
renderizada com a estilizagao padrao do Bootstrap. 

Observe na figura 6.3 o resultado da primeira etapa. 

0 Portal Forum 7Masters Ferramentas Cursos online Agenda Revista iMasters interCon 

□ H 0 0 Faga Login / Cadastre-se 

Figura 6.3 - Primeira etapa da criaqao do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 


6.2.2 Segunda etapa: personalizagao da barra de topo 

Ao termino da primeira etapa, construlmos a barrinha colorida superior e a barra 
de navegagao estilizada segundo o padrao de estilos do Bootstrap. 

Nesta etapa, criaremos as regras de estilo personalizadas, conforme mostradas e 
comentadas a seguir. 

• CSS 

1. #nav-superior { background:#fff; } 
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2. #nav-superior li a { padding:2px 4px; } 

3. #nav-superior li aihover { color:#00f; } 

4. @nedia (nin-width: lpx) { 

5. .navbar { 

6. min - height:auto; 

7. margin:0; 

8. border:none; 

9- } 

10. .navbar li a { color:#333; } 

11 . } 

[.../c6/imasters2.html] 

Codigo comentado: 

Linha Descri^ao 

Linha 1 Esta declaragao sobrescreve a cor de fundo padrao (#£8f8£8) da barra 

de navegagao e a faz branca. 

Linha 2 Sobrescrevemos o padding padrao do Bootstrap para os elementos a da 

barra de navegagao que e maior do que aquele previsto para o nosso 
layout. 

Linha 3 Definimos a cor azul, prevista para o estado over dos links. 

Linha 4 Declarar @nedia (nin-width:lpx) tem o efeito de sobrescrever as regras de 

estilo padrao para todas as larguras de viewport. Se nao tivessemos 
langado mao deste artificio as regras CSS contidas nas linhas 5 a 11 va- 
leriam apenas para larguras de viewport menores que 768px (lembra-se 
do principio mobile-first do desenvolvimento das CSS do Bootstrap?). 

Linhas 5 a 10 Examinando a folha de estilo do Bootstrap encontramos as regras 
CSS para estilizar as barras de navegagao. Ali estao as declaragoes 
para bordas cinzas e arredondadas, altura minima de 50px, margens 
conforme mostrado na figura 6.3. As declaragbes CSS contidas nestas 
linhas estilizam a barra de navegagao superior de acordo com o layout 
do iMasters. 

Linha 11 Estiliza os links da barra de navegagao na cor preta. 

Observe na figura 6.4 o resultado da segunda etapa. 


H Portal Forum 7Masters Ferramentas Cursos online Agenda Revista iMasters InterCon 


Q Q O H 0 E3 Ea^a Login / Cadastre-se 


Figura 6.4 - Segunda etapa da criaqao do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 
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6.2.3 Terceira etapa: barra do logotipo e caixa de busca 

Nesta etapa, iremos criar e personalizar a barra azul que content o logotipo e a 
caixa de busca do site. Para esta barra definimos um atributo id com valor barral. 

A marcagao HTML para esta barra e conforme mostrada a seguir. 


• HTML 

1. <div class="row"> 

2. <div class="col-lg-12"> 

3. <div td="barral"> 

4. <ing src="imagens/branding.png" alt="logo iMasters"> 

5. <span class="texto-logo">+ de 11.000 artigos tecnicos publicados en 12 anos</span> 

6. <form class="navbar-forn navbar-right" role="search"> 

7. <div class=''forn-group"> 

8. <input type="text" class="forn-control" placeholder="Busca"> 

9. </div> 

10. <button type="subnit" class="btn btn-default">OK</button> 

11. </form> 

12. </div> <!-- /#barral --> 

13. </div> 

14. </div> <!-- /.row --> 


Codigo comentado: 


Linha 

Linhas 1 e 14 
Linhas 2 e 13 
Linhas 3 e 12 

Linha 4 
Linha 5 


Linhas 6 a 11 


Descrigao 

Deninimos uma linha para container da barra. 

Criamos uma coluna dentro da linha container da barra. 

Definimos um container para o logotipo e o formulario com a finalidade 
de termos uma referenda unica para estilizagao. 

Insere a imagem do logotipo do iMasters. 

Marcagao do texto ao lado do logotipo. Inserimos o texto dentro do 
container span. texto-logo, pois iremos estiliza-lo de forma diferenciada, 
como veremos adiante. 

Marcamos o formulario de busca conforme estudado no item [4.7.3]. 


• CSS 

body { background: #f5f5f5 url(imagens/bg-header.png) repeat-x; } 
#barral { background: #64a7b7; padding: 20px; } 

.texto-logo { font-size: 120%; color:#fff; } 


[.../c6/imasters3.html] 
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Essas tres regras CSS sao suficientes para estilizar a barra do logotipo e caixa de 
busca. Notar que para estender a cor de fundo da barra usamos uma imagem, 
com repetigao no eixo dos x, como fundo do elemento body. 

Observe na figura 6.5 o resultado da terceira etapa. 



| Portal Forum 7Masters Ferramentas Cursos online Agenda Revista iMasters InterCon 


iMasters + de 11.000 artigos tecnicos publicados em 12 anos 


QQQQQS Faca Lo 9 in 1 Cadastre-se 



Figura 6.5 - Terceira etapa da criagao do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 


6.2.4 Quarta etapa: mecanismo de navegagao principal 

Nesta etapa, iremos criar e personalizar o mecanismo de navegagao principal 
do site. 

Para criar este mecanismo de navegagao, usaremos o componente do Bootstrap 
denominado barra de navegagao com link dropdown estudada no item [4.7.5], e 
marcada conforme o codigo mostrado a seguir. 

• HTML 

<div class=”row”> 

<div class="col-lg-12"> 

<nav class=''navbar navbar-default"> 

<div class=''navbar-header"> 

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#barraPrincipal"> 

<span class="sr-only">Toggle navigation</span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

</button> 

<a class="navbar-brand hidden-Ig hidden-nd hidden-sn" 

href="#" data-toggle="collapse" data-target="#barraPrincipal">Menu</a> 

</div> 

<div class="collapse navbar-collapse" id="barraPrincipal"> 
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<ul class="nav navbar-nav"> 

<li class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 

aria-expanded=''false">Design &#038; UX<span class="caret"></span></a> 

<ul class="dropdown-nenu" role="menu"> 

<li><a href="#">User Experience</a></li> 

<li><a href="#">Arquitetura de Informagao</a></li> 

<!-- mais itens --> 

</ul> 

</li> 

<!-- nais dropdown --> 

<li><a href="#">Mapa do site</a></li> 

</ul> 

</div><!-- /.navbar-collapse --> 

</nav> 

</div> 

</div> <!-- /.row --> 

A marcagao HTML mostrada e tlpica para criagao de uma barra de navegagao 
com links em menu dropdown como estudado no item [4.7.5]. 

• CSS 

1. #barraPrincipal { nargin-bottom:20px; background:#7bb3cl!important; } 

2. #barraPrincipal li a { 

3. font-size:80%; 

4. text-transforn:uppercase; 

5. padding:Spx; 

6. color:#fff; 

7- } 

8. a:hover { text-decoration:none; } 

9. #barraPrincipal li ul li a { color:#333; } 

[.../c6/imasters4.html] 

Codigo comentado: 

Linha Descrigao 

Linha 1 Definimos uma margem abaixo da barra de navegagao e a cor de fundo 

azul-clara para a barra de navegagao. 

Linha 2 a 7 Estilizamos os links da barra de navegagao. 

Linha 8 Define a cor de fundo azul-clara para a barra. 
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Linha Descrigio (cont.) 

Linha 9 Para os links do submenu, cujo fundo e branco, definimos uma cor 

escura para sobrescrever a cor branca definida para os links de abertura 
do submenu que estao em fundo azul. 

Observe na figura 6.6 o resultado da quarta etapa. 


| Portal Forum 7Masters Ferramentas Cursos online Agenda Revista iMasters InterCon 


iMasters + de 11.000 artigos tecnicos publicados em 12 anos 


DESIGN«UX- FRONT-END — DEV- BD- VOLKSWAGEN- MOBILE- MARKETING- GESTAO APIS INFRA TECH E-COMMERCE ANALYTICS 


QQOQSS Faca Login 1 Cadastre-se 



Figura 6.6 - Quarta etapa da criagao do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. Ha inconsistencias 
que serao tratadas nas etapas seguintes. 


6.2.5 Quinta etapa: destaques da semana 

Nesta etapa, iremos criar e personalizar os quatro blocos que promovem os artigos 
em destaque, publicados na semana, em diversas areas do site. 

Para alcangar os objetivos desta etapa, iremos usar uma linha do layout contendo 
quatro colunas em larguras de viewport maiores e dispostas em duas ou uma 
coluna em viewports menores. 

A marcagao HTML e mostrada a seguir. 

• HTML 

<section class=”row destaques”> 

<div class="coL-sm-3 col-xs-6"> 

<figure><a href="#" title="Gerencie sites en WP e destaque-se no nercado"> 

<ing src="inagens/banner-para-anuncios.jpg" class="ing-responsive" 
ait="banner para anuncios"></a> 

<figcaption class="bcl"><a href="#" 

titie="Gerencie sites en WP e destaque-se no nercado" cLass="ccl"> 

Gerencie sites en WP e destaque-se no nercado</a> 

</figcaption> 

</figure> 

</div> 

<div ctass="col-sn-3 col-xs-6"> 
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<!-- senelhante ao anterior --> 

</div> 

<div class="col-sn-3 col-xs-6"> 

<!-- senelhante ao anterior --> 

</div> 

<div class=''col-sn-3 col-xs-6"> 

<!-- senelhante ao anterior --> 

</div> 

</div> 

</section> <!-- /.row --> 

No codigo anterior, mostramos a marcagao HTML completa somente para o 
primeiro bloco, abreviando-a para os tres seguintes, pois a marcagao para eles e 
semelhante a do primeiro item, exceto as classes bcl e ccl que para estes tres blo- 
cos sao: bc2 e cc2, bc3 e cc3 e bc4 e cc4 respectivamente. Estas classes se destinam a 
estilizar cor de fundo e cor de textos para cada um dos blocos. 

Notar ainda a definigao de colunas em <div class="col-sn-3 col-xs-6"> destinada a 
posicionar os quatro blocos em uma linha, duas linhas e quatro linhas conforme 
a largura da viewport. 


• CSS 


1. .destaques ing { width:100%; height: auto; } 

2. .destaques figcaption { 

3. font-size:130%; 

4. background:#fff; 

5. nin- height:100px; 

6. padding:10px 20px; 


7 - } 

4. .bcl { border-botton: 

5. .ccl { display:block; 

6. .bc2 { border-botton: 

7. ,cc2 { display:block; 

8. .bc3 { border-botton: 

9. ,cc3 { display:block; 

10. ,bc4 { border-botton: 

11. ,cc4 { display:block; 


6px solid #el734a; } 
color: #el734a; } 

6px solid #8d9b31; } 
color: #8d9b31; } 

6px solid #4476ab; } 
color: #4476ab; } 

6px solid #9c6496; } 
color: #9c6496; } 


[.../c6/imasters5.html] 
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Linha Descriqio 

Linha 1 Por padrao as imagens inseridas na marcagao HTML nao sao responsi- 

vas. Assim, declaramos a largura em 100% com a finalidade de faze-las 
responsivas. 

Linha 2 a 7 Regras para estilizar o container dos blocos. 

Linhas 4 a 11 Classes para estilizar as cores de fundo e dos textos em cada um dos 
quatro blocos. 

Observe na figura 6.7 o resultado da quinta etapa. 
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Figura 6.7 - Quinta etapa da criagao do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 


6.2.6 Sexta etapa: barra de notfcias 

Nesta etapa, iremos criar e personalizar a barra de notlcias com fundo na cor 
preta que se estende por toda a largura da viewport. Essa barra content quatro 
notlcias com texto na cor branca, sendo que para cada uma das noticias ha um 
tltulo em cor diferente. Sobre a margem inferior da barra ha um link em uma 
pequena caixa com o texto +noticias. 

Para alcangar os objetivos desta etapa, a marcagao HTML escolhida foi aquela 
que cria uma linha com quatro colunas, cada uma contendo uma noticia. O link 
+noticias esta contido dentro da linha. 

A marcagao HTML para esta etapa e mostrada a seguir. 
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Boostrap 3.3.5 


• HTML 

<div class=”container-fluid”> 

<section class="row noticias"> 

<div class="container''> 

<div class="col-sn-3"> 

<h3><span class="ccl">Desenvolvinento</span> / 16 horas atras</h3> 

<p><a href="#">Stack Overflow disponibiliza site en portugues</ax/p> 

</div> 

<div class="col-sn-3"> 

<h3><span class="cc2">Mercado</span> / 17 horas atras</h3> 

<p><a href="#">Vendas de tablets aunentan 50,6% en 2013, nas ha sinais de 
satura?ao</a></p> 

</div> 

<div class="col-sn-3"> 

<h3><span class="cc3">Redes sociais</span> / 18 horas atras</h3> 

<pxa href="#">Facebook estreia botao "retweet" no leitor de noticias Paper</ax/p> 
</div> 

<div class="col-sn-3"> 

<h3><span class="cc4">Tecnologia</span> / 18 horas atras</h3> 

<p><a href="#">AMD anuncia prineira CPU baseada en ARM de 64 bits</a></p> 

</div> 

<a href="#" class="nais-noticias">+ noticias</a> 

</div> <!-- /.container --> 

</section> <!-- /.row --> 

</div> <!-- /.container-fluid --> 

• CSS 

1. .noticias { 

2. position relative; 

3. background:#333; 

4. padding: 10px 0; 

5. nargin-top:20px; 

6 . } 

7. .noticias h3 { 

8. font-size:90%; 

9 color: #999; 

10. text-transforn:uppercase; 

11 . } 
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12. .noticias a { 

13. display:block; 

14. font-size:150%; 

15. color:#fff; 

16. } 

17. .noticias a:hover { color:#ccc; } 

18. a:hover { text-decoration:none; } 

19. a.nais-noticias { 

20. width:160px;; 

21. font-size:100%; 

22. text-align:center; 

23. background:#666; 

24. position absolute; 

25. left:50%; 

26. bottom:-10px; 

27. margin-left:-80px; 

28. } 

29. @media screen and (max-width:1200px) { 

30. body { 

31. background-image:none; 

32. } 

33. } 

34. @media screen and (max-width:992px) { 

35. form[role="search"] { 

36. float: none! important; 

37. } 

38. } 

[.../c6/imasters-final.html] 

Codigo comentado: 

Linha Descri^ao 

Linhas 1 a 6 Convem destacar a declaragao de posicionamento relativo para a linha 
container desta segao. essa declaragao visa a criar um contexto de po¬ 
sicionamento para o link +noticias (ver linhas 24 a 27). 

Linhas 7 a 28 Estilizagao geral auto explicativa. 

Linhas 29 a 38 Regrasespecificasparabreakpoinscomafinalidadedeevitarpequenas 
quebras no layout. Retire estas regras e observe o efeito ao redimensionar 
a janela do navegador. 
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Boostrap 3.3.5 


Observe na figura 6.8 o resultado da sexta etapa. 
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Figura 6.8 - Sexta etapa da criagao do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 
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